1
訪問模型在VueJS我設置基於用戶操作的模型數據。我想從一個方法訪問模型來更新一個元素。VueJS從方法
在下面的代碼中，當用戶更改第一個選擇列表時，我想更新第二個選擇列表以顯示第一個列表的id屬性。由於它是上層列表工作正常，但上層列表ID屬性沒有更新上層列表更改：
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
</head>
<body>
<div id="editor">
<form id="query" methods="GET">
<div id="form_container" class="row">
<div class="form-group">
<label for="choice-selector">Choices</label>
<select class="form-control" id="choice-selector" v-model="choice_id" v-on:change="refreshOptions">
<option v-for="item in choices" v-bind:value="item.id">
{{ item.name }}
</option>
</select>
<span>Current choice id: {{ choice_id }}</span>
<br>
<label for="option-selector">Options</label>
<select class="form-control" id="option-selector" v-model="option_id" >
<option v-for="item in options" v-bind:value="item.id">
{{ item.name }}
</option>
</select>
<span>Current option id: {{ option_id }}</span>
</div>
</div>
</div>
<script>
let index = 0;
new Vue({
el: '#editor',
data: {
choice_id: '1',
choices: [
{ id: '1', name: 'Choice A' },
{ id: '2', name: 'Choice B' },
{ id: '3', name: 'Choice C' }
],
option_id: '1',
options: [
]
},
ready: function startFetch() {
this.refreshOptions();
},
methods: {
refreshOptions: function refreshOptionList() {
console.log(">>refreshOptionList() index:" + index);
const vm = this;
const newOptions = [{ id: index, name: 'Option based on choices list id: ' + vm.choice_id }];
vm.$set('options', newOptions);
index += 1;
}
},
});
</script>
</body>
</html>
任何想法？
你無法訪問'vm.options'嗎？你能創造一個小提琴嗎？ – Saurabh
@Saurabh我已經將代碼更改爲嵌入在html中的vue，以便將代碼粘貼到HTML頁面並在瀏覽器中打開。我不能從refreshOptions方法訪問選擇列表id屬性或choice_id屬性。 –