從Vue中的組件更新根中的數據JS

我有一個Vue組件，我想更新根中的數據源。我已經在使用道具做這件事了，但我無法在其中添加名爲titleActive的第二個來源，titleActive的值不會在根上更新。從Vue中的組件更新根中的數據JS

組件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>

來源

2017-03-22 Clinton Green

titleActive應該表明什麼？你不能只是看到selectedTopic的變化，並在Vue中適當地設置它？ – Bert

嗨，這將是理想的，但我用它來移動窗體上的步驟之間的高亮類。所以不幸的是，除了selectedTopic之外，我還需要其他的東西才能工作。例如，我可以用'v-bind：class =「{'highlight'：！selectedTopic}」'在步驟1中設置高亮類，然後用'v-bind：class =「{'highlight'：selectedTopic} 「'但是當我進入步驟3而又沒有爲步驟1再次啓用它時，如何從步驟2中刪除高亮級別？ –

我想我已經找到了使用計算屬性的更好方法。 –

所以我要對此錯誤辦法。因此，對於處理元素的人來說，如果需要在三個窗口之間切換一個類，可以使用以下方法。

步驟1使用的成分，我使用該問題， How to get data from a component in VueJS獲得這些數據到根。接收到的數據被稱爲selectedTopic
步驟2是一個靜態的輸入，該數據被稱爲questionTitle，經由V型模型獲得
步驟3是一個靜態文本區域，該數據被稱爲questionDescription，經由V型模型獲得

現在我們需要一種循環高亮類的方法，幸運的是，您可以使用Vues v-bind：class feature。你只需要比較多個值來確定哪一個應該有這個類。

所以第1步將有v-bind:class="{ highlight: !selectedTopic && !questionTitle }"
步驟2將有v-bind:class="{ highlight: selectedTopic && !questionTitle }"
和步驟3將有 v-bind:class="{ highlight: questionTitle && !questionDescription }"

通過檢查該值被加載使用得到一個真實的陳述的這種方法但在這樣的情況下會有所幫助。

來源

2017-03-23 02:01:08

從Vue中的組件更新根中的數據JS

回答

相關問題