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

Posted 2023-02-23

【中文标题】从 Vue JS 中的组件更新 Root 中的数据

【英文标题】：Update data in Root from Component in Vue JS

【发布时间】：2017-08-15 08:18:02

【问题描述】：

我有一个 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>

【问题讨论】：

titleActive 应该表示什么？你能不能只观察 selectedTopic 的变化并在 Vue 中适当地设置它？

您好，这很理想，但我正在使用它在表单上的步骤之间移动突出显示类。所以不幸的是，除了 selectedTopic 之外，我还需要其他东西才能正常工作。例如，我可以使用v-bind:class=" 'highlight': !selectedTopic " 在第1 步设置高亮类，然后使用v-bind:class=" 'highlight': selectedTopic " 在第2 步设置高亮类，但是当我转到第3 步而不为第1 步再次启用它时，如何从第2 步删除高亮类？

我想我找到了使用计算属性的更好方法。

听起来不错。这（突出显示活动表单元素/步骤）听起来像是应该在组件外部控制的东西。

是的，最后我什至不需要计算属性，我只使用了vbind:class=" highlight: statment1 && statement2 " 通过有多个数据源进行比较，我能够确定哪个元素应该有.highlight上课吧。

【参考方案1】：

所以我以错误的方式解决了这个问题。因此，对于其他处理需要在类之间切换类的元素的人，例如具有 3 个步骤的表单，您可以使用以下方法。

第 1 步使用了一个组件，我使用该组件将该数据发送到根目录 题， How to get data from a component in VueJS。收到的数据称为selectedTopic 第二步是静态输入，数据叫questionTitle，得到 通过 v-model 第三步是一个静态的textarea，数据叫questionDescription， 通过 v-model 获得

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

所以第 1 步将有 v-bind:class=" highlight: !selectedTopic && !questionTitle " 第 2 步将有 v-bind:class=" highlight: selectedTopic && !questionTitle " 第 3 步将有 v-bind:class=" highlight: questionTitle && !questionDescription "

使用这种通过检查加载了哪些值来获得真实陈述的方法在此类情况下会有所帮助。