Vue JSのComponentからRootのデータを更新

Question

Vueコンポーネントがあり、ルートのデータソースを更新したいとします。私はすでに小道具でこれをやっていますが、titleActiveという2番目のソースを追加するのに問題があります。titleActiveの値はルート上で更新されません。

コンポーネント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> 

Answer 1

方法。たとえば、3つのステップを持つフォームの間でクラスを切り替える必要がある要素を扱う他の人は、次のメソッドを使用できます。

1. ステップ1は、コンポーネントを使用し、私はこの 質問、 How to get data from a component in VueJSを使用してルートにそのデータを取得します。受信データがselectedTopic
2. ステップ2静的入力であると呼ばれ、データは、Vモデル
3. ステップ3を介し を取得し、questionTitle呼ばれるデータがquestionDescription呼ばれ、静的TEXTAREAである、 Vモデルを介して得られます

ハイライトクラスを循環させる方法が必要です。幸いなことに、Vues v-bind：classフィーチャーを使用できます。どのクラスを持っているべきかを判断するには、複数の値を比較するだけです。

1. ので、ステップ1はv-bind:class="{ highlight: !selectedTopic && !questionTitle }"
2. ステップ2 v-bind:class="{ highlight: selectedTopic && !questionTitle }"
3. を持つことになりますがありますし、ステップ3は、値がロードされるチェックすることにより、真の声明を得るためのこの方法を使用 v-bind:class="{ highlight: questionTitle && !questionDescription }"

ていますこのような状況では助けになるでしょう。