1
Vueコンポーネントがあり、ルートのデータソースを更新したいとします。私はすでに小道具でこれをやっていますが、titleActive
という2番目のソースを追加するのに問題があります。titleActive
の値はルート上で更新されません。Vue JSのComponentからRootのデータを更新
コンポーネントJS
<template>
<div>
<label v-for="topic in topics" class="radio-inline radio-thumbnail">
<input type="radio" @click="selectedValue(topic)" name="topics_radio" :id="topic.id" :value="topic.name" :checked="value && topic.id == value.id">
<span class="white-color lg-text font-regular text-center text-capitalize">{{ topic.name }}</span>
</label>
<ul class="hidden">
<li>{{ value }}</li>
</ul>
</div>
</template>
<script>
export default {
props: ['value','titleActive'],
data() {
return {
topics: [],
titleActive: false
}
},
methods:{
selectedValue(topic){
this.$emit('input', topic);
this.titleActive = true;
}
},
mounted(){
axios.get('/vuetopics').then(response => this.topics = response.data);
}
}
</script>
Vueのインスタンス
<script>
var App = new Vue({
el: '#app',
data: {
selectedTopic: null,
selectedKeywords: null,
selectedProfiles: null,
questionTitle: null,
titleActive: false
},
methods: {
titleBlur: function(){
// this.selectedTopic = null;
}
}
});
</script>
だから私はこのことについて間違っを行っていたHTML
<div class="form-group" id="app">
<topic v-model="selectedTopic"></topic>
</div>
titleとは何ですか? selectedTopicの変更を見てVueで適切に設定するだけではありませんか? – Bert
こんにちは、それは理想的ですが、私はそれをフォームのステップ間でハイライトクラスを移動するために使用しています。だから残念ながら、私はselectedTopicのほかに、それが動作するために何か他のものが必要です。たとえば、ステップ1でハイライトクラスを 'v-bind:class =" {'highlight':!selectedTopic} ''で設定し、次に 'v-bind:class =" {'highlight':selectedTopic} "その後、ステップ1に再び有効にしないでステップ3に行くと、ハイライトクラスをステップ2から削除するにはどうすればよいですか? –
私は計算されたプロパティを使ってより良い方法を見つけたと思います。 –