Home > front end >  Vue Select in the drop-down box with a v - model binding one value, use v - for multiple traversal,
Vue Select in the drop-down box with a v - model binding one value, use v - for multiple traversal,

Time:11-30

Vue Select in the drop-down box with a v - model binding one value, use v - for multiple traversal, change a drop-down box options, other changes will be more than the traverse on the way out, change the value of one, the other will change, how should I solve?? Don't let them linkage

CodePudding user response:

Do not bind the same v - model

CodePudding user response:

I this is cycle of data, only a data binding

CodePudding user response:

Didn't understand what do you want to express? More clearly

CodePudding user response:

@ summer_ snow
Is now circulating out data drop-down box to choose one of the other data drop-down box also follow to change into the same value, because they v - model binding is the same data (v - mdel cycle of data does not change), now just want to let it alone to choose other unaffected

CodePudding user response:

 & lt; ! DOCTYPE html> 
& lt; HTML XMLNS="http://www.w3.org/1999/xhtml" & gt;
& lt; head>
& lt; Meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt;
& lt; title>

<body>


SelectedA: {{SelectedA}} & lt;/span>



SelectedB: {{SelectedB}} & lt;/span>



SelectedC: {{SelectedC}} & lt;/span>




<script SRC="https://bbs.csdn.net/Scripts/VUE/vue.js" & gt; </script>
<script>
New Vue ({
El: '# app,
Data: {
SelectedA: 'A',
SelectedB: 'B',
SelectedC: 'C',
Options: [
Value: {text: 'One', 'A'},
Value: {text: 'Two', 'B'},
Value: {text: 'Three', 'C'}
]
}
})
</script>

CodePudding user response:

The
reference
Hello World,

I come out in the circulation data v - model can only be bound to the same data,

CodePudding user response:

You are now have multiple select the drop-down selection box? Every one of them was cycle?

CodePudding user response:

1. Modify the source data, add a selectVal properties, and under the drop-down menu first assignment here
This. GoodsList. ForEach ((item, index)=& gt; {
Item. Checkd=false
Item. The index=index
Item. SelectVal=item. Attr_name [0]
})

2. Use just manually add attributes in the view layer, gets an attribute value
{{item. SelectVal}} & lt;/span>

3. Change the source data in the down selection box new selectVal attribute value of
SelectTypeHandle (item, e, index) {
Item. SelectVal=e.c. with our fabrication: urrentTarget. Dataset. The value;
},

CodePudding user response:

The building Lord problem solved, encounter the same problem
` ` ` js
V - for="el in uploadMusiceInfo. The tag"
: key="el. Id"
V - model="uploadMusiceInfo. TagVal
"
: placeholder="el. The name"
Clearable
@ focus="handlezBgmTag (el)"

V - for="e in uploadMusiceInfo tagChild"
: e.i key="d"
: label="e.n ame"
: value="https://bbs.csdn.net/topics/e.name"
/>

` ` `
V - model value, change a value to change the rest

CodePudding user response:

references 9 f QCousin response:
problem solved the building Lord, encounter the same problem
` ` ` js
V - for="el in uploadMusiceInfo. The tag"
: key="el. Id"
V - model="uploadMusiceInfo. TagVal
"
: placeholder="el. The name"
Clearable
@ focus="handlezBgmTag (el)"

V - for="e in uploadMusiceInfo tagChild"
: e.i key="d"
: label="e.n ame"
: value="https://bbs.csdn.net/topics/e.name"
/>

` ` `
V - model value, change a value to change the rest



The several variables is not just a matter of

` ` ` js
V - for="(el, index) in uploadMusiceInfo. The tag"
: key="el. Id"
V - model="uploadMusiceInfo tagVal [index]"

: placeholder="el. The name"
Clearable
@ focus="handlezBgmTag (el)"

V - for="e in uploadMusiceInfo tagChild"
: e.i key="d"
: label="e.n ame"
: value="https://bbs.csdn.net/topics/e.name"
/>

` ` `