Question

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

第1步使用组件，然后使用此方法将数据传输到根目录题， How to get data from a component in VueJS。收到的数据称为selectedTopic
步骤2是静态输入，数据被称为questionTitle，获得通过v-model
第3步是静态textarea，数据名为questionDescription，通过v-model获得

现在我们需要一种循环突出显示类的方法，幸运的是你可以使用Vues v-bind：类功能。您只需要比较多个值来确定哪个值应该具有该类。

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

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

从Vue JS中的Component更新Root中的数据

1 个答案: