Question

我有以下情况，当更改下拉列表时，控件将更新数据表。两者的语法：

<template id="ux-selector">
     <el-select v-on:change="updateTable()" v-model="option">
         <el-option v-for="option in options" :label="option.Label" :value="option.Value"></el-option>
     </el-select>
</template>

表格的语法如下：

<template id="ux-table">
     <el-table :data="sampleObject" height="250" highlight-current-row @current-change="handleTableSelect">
         <el-table-column prop="name" label="Name"></el-table-column>
         <el-table-column prop="address" label="Address"></el-table-column>
         <el-table-column prop="status" label="Status"></el-table-column>
     </el-table>
</template>

因此，如果我单独手动执行这些操作，则填充：

var Application = {
    data() {
      return {
        options: buildDateDropdown()
      }
    }
  };

var Ctor = Vue.extend(Application);
new Ctor().$mount('#ux-selector');

代码将按预期工作，构建我的下拉列表。问题是，当我尝试使用我的Vue代码并使用组件时。

var dropdownComponent = Vue.component('date-dropdown', {
     el: '#application-header',
     template: 'ux-selector',
     data: { options: buildDateDropdown() },
     methods: {
         updateTable: function() {
              const month = this.option.selected.value.split('~')[0];
              const year = this.option.selected.value.split('~')[1];

              axios.get('/Home', {
                   params: {
                       Month: month,
                       Year: year
                   }
              }).then(function(response) {
                  this.$.emit('sampleObject', response);
              });
         }
     }
};

var tableComponent = Vue.component('data-table', {
     el: '#application-content',
     template: 'ux-table',
     data: { 
          sampleObject: '' // Not sure how to get emit response to here.
     }
};

var application = new Vue({
    el: '#application',
    components: dropdownComponent, tableComponent
});

所以这个问题是多方面的，什么都没有出现，我如何从.$emit传递到另一个组件，重新填充？对这项工作进行的解释和修正有望揭示从组件传递到组件的事件数据。

Vue.js事件修饰符问题

0 个答案: