Question

我有一个对象数组。我想通过选择框将值更改为object属性。

HTML

<div id="app">
{{ message }}<br><br>
<select v-modal="items[0].val">
<option value="newjs">New js</option>
<option value="vannilajs">Vannila js</option>
</select>
<br>
ITEM 0 = {{items[0].val }}
<br>
ITEM 1 = {{items[1].val }}
</div>

JS

new Vue({
el:'#app',
data: {
message: 'testing',
items: [{val:'VUE'},{val: 'REACT'}] //intial two items    
   }
});

当选择框更改时，我想将ITEM 0的值更改为选定值。

目前只是出于测试目的，我正在尝试从数组中访问第0个对象。此选择框将在多个选择框的v-for循环中。

FIDDLE

Answer 1

您无法在Vue.js

中轻松地为变量分配对象和数组

<div id="app">
    <select @input="change">
        <option value="newjs">New js</option>
        <option value="vannilajs">Vannila js</option>
    </select>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        items:[{val:'VUE'},{val:'REACT'}]
    },
    methods: {
        change(element) {
            this.$set(this.items[0], 'val', element);
        }
    }
});
</script>

Vue只能通过引用（message = 'hey'）或对象引用（object.message = 'hey'）来迁移刷新更改的值，但前提是该引用位于创建时间data()中。

new Vue({
    data: {
      object: {first:0},
      array: [1,2,3]
    },
    methods: {
        change() {
            object.first = 2; // works
            object.second = 3; // doesn't work

            array[0] = 2; // works for 0,1,2
            array[4] = 3; // doesn't work
        }
    }

对于object.second和array[3]，您需要使用$set()。

Answer 2

好的，我误解了你的问题。你确实有拼写错误，但你还需要一个中间变量来保存下拉值

<div id="app">
{{ message }}<br><br>
<select v-model="selectedValue">
<option value="newjs">New js</option>
<option value="vannilajs">Vannila js</option>
</select>
<br>
ITEM 0 = {{selectedValue }}
<br>
ITEM 1 = {{items[1].val }}
</div>

new Vue({
el:'#app',
data: {
message: 'testing',
selectedValue: 'VUE',
items: [{val:'VUE'},{val: 'REACT'}] //intial two items    
   }
});

V型模式选择框中的变量

2 个答案: