1
In VueJS setze ich Modelldaten basierend auf Benutzeraktionen. Ich möchte auf das Modell von einer Methode zugreifen, um ein Element zu aktualisieren.VueJS Zugangsmodell von Methode
Im folgenden Code, wenn der Benutzer die erste Auswahlliste ändert, möchte ich die zweite Auswahlliste aktualisieren, um die ID-Eigenschaft der ersten Liste anzuzeigen. Wie es ist die obere Liste funktioniert OK, aber die untere Liste ID-Eigenschaft ist nicht auf der oberen Liste geändert ändern:
<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>
Irgendwelche Ideen? vm.$set
Können Sie nicht auf 'vm.options' zugreifen? Kannst du eine Geige spielen? – Saurabh
@Saurabh Ich habe den Code zu Vue in HTML eingebettet, so dass der Code in eine HTML-Seite eingefügt und im Browser geöffnet werden kann. Ich kann nicht auf die Auswahllisten-ID-Eigenschaft oder die Eigenschaft choice_id von der refreshOptions-Methode zugreifen. –