从 Vue JS 中的组件更新 Root 中的数据

Question

我有一个 Vue 组件，我想更新 Root 中的数据源。我已经在使用 props 执行此操作，但我无法向其添加名为 titleActive 的第二个来源，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 个步骤的表单之间切换 class，您可以使用以下方法。

第 1 步使用一个组件，我使用它将该数据获取到根目录题，。收到的数据叫做selectedTopic
Step 2为静态输入，数据为questionTitle，得到通过 v-模型
Step 3是静态textarea，数据叫questionDescription，通过 v-model

现在我们需要一种循环高亮的方法 class，幸运的是你可以只使用 Vues v-bind:class 特性。您只需要比较多个值即可确定哪个值应具有 class.

因此第 1 步将有 v-bind:class="{ highlight: !selectedTopic && !questionTitle }"
第 2 步将有 v-bind:class="{ highlight: selectedTopic && !questionTitle }"
第 3 步将有 v-bind:class="{ highlight: questionTitle && !questionDescription }"

使用这种通过检查加载了哪些值来获取真实语句的方法在这些情况下会有所帮助。

从 Vue JS 中的组件更新 Root 中的数据

Update data in Root from Component in Vue JS

components

vue.js

vue-component

vuejs2