how to let input display when clicking on a group, click on individual input to hide, (and how to get the value entered by input)
<el-radio-group v-model="ruleForm.nature" :change="change">
<el-radio label="" ></el-radio>
<el-radio label=""></el-radio>
<el-input></el-input>
</el-radio-group>Thank you for inviting ~
// html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.1/lib/index.js"></script>
<div id="app">
<template>
<el-radio-group v-model="radio2" @change="change">
<el-radio :label="1"></el-radio>
<el-radio :label="2"></el-radio>
<el-input v-model="inputValue" v-if="radio2 !== 1"></el-input>
</el-radio-group>
</template>
</div>// css
@import url("//unpkg.com/element-ui@2.4.1/lib/theme-chalk/index.css");// JS
var Main = {
data () {
return {
radio2: 1,
inputValue: 'Rowboat'
};
},
methods: {
change(val){
console.log(val, 'val');
console.log(this.inputValue, 'input');
},
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('-sharpapp')have a look at ide/forms.html" rel=" nofollow noreferrer > vue document-form input binding and elementUI document .
you can implement a single selection group by combining the el-radio-group element and the child element el-radio. Bind the label model in el-radio-group, and set the label in el-radio. There is no need to bind variables to each VMI. In addition, it also provides a change event to respond to changes, which passes in a parameter value.
I wrote with the case on theelementUIdocument. It can be accessed normally after climbing the wall.
change events are shown or hidden by id judgment or literal judgment
Previous: How do I add a different class to an event and remove a class?
Next: A test case in js always returns undefined when calling the main function
file-list has multiple values in the upload file upload. How to know the index of the selected value when deleting it ...
shows that vue-router switching to a new view will pop up a large number of such errors ...
first, use the upload component of elementUI to save the file to form.picFile and form.corFile respectively, and then new a FormData object at the time of submission, and then append the file, but there is only one file in the data sent. What is the rea...
the project needs to make a tree-shaped table, as shown in the figure. The page still flows when there is a small amount of data. After importing thousands of pieces of data, it is directly jammed. When you first request to render DOM, you use 3room5s. ...
1. Click the View hide current button and this content to show that another content can. 2. At first, manual display:none, found that after turning the page, the effect of the current cell none on the next page was still there. 3. So I tried to <...
now you need to upload the attachment to the server. The file type can only be processed by doc,png,txt, before it is submitted. the following example is basically picked from the official website of element-ui, because I only need to upload one file, ...
as follows, how to get the value value selected by select when sending a request? <el-form-item> <el-select v-model="team[0].value" size="small"> <el-option v-for="item in team" :label=...
< H1 > element-ui el-radio how can I click to deselect it again when it is already selected? < H1 > <template> <el-radio-group v-model="radio2" @change="onRadioChange"> <el-radio :label="3">&l...
as shown in the figure, when the form is defined and clicked on submit, how to quickly get all the name value similar to jQuery serialize, can not define the name value one by one, and then send the request after the object is stitched together? ...
as shown in the picture, I need to loop small pieces of col. ...
when I make changes to a form, the option from the background is automatically filled in by v-modle. something strange has happened! For the same code, one can be selected automatically, but not the other <el-radio-group v-model="gender"...
problem description 1010: : : vuehtml: : if I remove: key= "index ", I will not report an error, but it should not be so. There is another problem. In the new process, the key name of the v-model binding of the form is the same, so the value ...
The code is as follows. The el-select, in the table is generally set in data after reading the online instructions (for example, risk_type is set to 0), but his initial value in my table is different, how to set this. Tried to set the select binding val...
because firefox does not support window.event s usual solution var evt = window.event | | arguments.callee.caller.arguments [0] Uncaught TypeError: caller , callee , and arguments properties may not be accessed on strict mode functions or...
the element UI tree control (el-tree) is being used in the form of lazy loading (lazy +: load= "loadNode " method). The business is as follows: 1-add a level 1 node 2-any node can add a new child node 3-edit node 4-delete node -(problems encountere...
is ready to add hierarchical splitters to the tree component, which needs to be styled with pseudo classes, but it has no effect. The code is as follows: -sharptree-wrap { .el-tree-node.is-expanded { position: relative; >.el-tree-node__ch...
<el-input style= width:336px;height:20px; placeholder="" v-model="creditCode" @blur="creditInfo" :maxlength=25> < el-input> <el-input style= width:336px;height:20px; ...
is a pop-up window with three select, terminal types, functional modules, and functional subdivisions. The function module comes out only after the terminal is selected, and the function subdivision is the same. The data in is fetched from the list. Be...
a. I made it with vuex. b. Change the value of default-active in the route intercept. c. Get this path from the navigation menu. is fine in theory, but! The current page is not selected until is refreshed. Direct click on the menu is not selected...
problem description elementUItableelement related codes in subcomponents { label: "", prop: ["rentOrder", "id"], filter: "zeroFmt", filters: [ { text: "", value: "" }, { t...