Question

我有一个vue，它使用一个手风琴表，在选择特定行时显示数据。有一个按钮＆＃34;编辑＆＃34;它隐藏数据并显示表单。

表单在另一个vue中（将它们分开...）单击按钮时显示表单，但是，在表单中我有另一个按钮＆＃34; Save＆＃34;它调用ajax请求，然后隐藏表单并显示数据。

我遇到的问题是我似乎无法弄清楚如何从第二个vue更新第一个vue中的变量。我可以使用store，但这不是一个选项，因为它会为每个人更新，而它应该只为特定用户更新。

查询vue：（HTML）

<tr v-if="row.id in expanded">
  <td :colspan="9" style="background-color: #F0FFFF;">
  <div class="accordian-body">
     <div v-if="editing != false">
        <enquiries-view-edit></enquiries-view-edit>
      </div>

     <div v-else>
       <div class="container">
          <div class="pull-right">
              <button type="button" class="btn btn-primary btn-md" @click="editing = !editing">Edit</button>
           </div>
       </div>
      </div>
    </div>
  </td>
</tr>

使用Javascript：

export default {

      components: {
          Multiselect
      },

      data() {
          return {
              msg: 'This is just an estimation!',
              tooltip: {
                  actual_price: 'Click on the price to edit it.'
              },
              expanded: {},
              replacedCounter: 0,
              theModel: [],
              enquiry: [],
              center: {lat: 53.068165, lng: -4.076803},
              markers: [],
              needsAlerting: false,
              editing: false
          }
      },
  }

内部EnquiriesVue我有：

export default {


    props: ['editing'],

    computed: {

        editing: function {
            console.log("Computed the value");
        }

    }
}

我试图计算该值，但这并没有在控制台内做任何事情。

编辑：

基本上，在enquiries-view-edit内我需要一个按钮，你点击它，它会更新editing vue中的变量Enquiries，以便隐藏表单，然后数据vue所示。

Answer 1

子组件可以通过发出事件与其父组件通信。像这样：

export default {        
    props: ['editing'],    
    methods: {
        onClick: function {
            console.log("Clicked on child!");
            this.$emit('stop-editing');
        }    
    }
}

这假设您的子组件模板中有类似的内容：

<button @click="onClick">Stop editing</button>

然后你可以＆＃34;听＆＃34;通过在包含子组件时注册处理程序，从父组件到任何其他本机事件的那个事件。

<enquiries-view-edit @stop-editing="editing = !editing"></enquiries-view-edit>

显然这是一个非常简单的例子。您还可以将数据与发出的事件一起传递给更复杂的场景。

VueJS - 在另一个vue中更新变量

1 个答案: