Question

在我的应用程序中，我有一个组件，我想要在组件之外的属性。我创建了这个例子：

Vue.component('vue-table', {
  template: '<div><template v-for="row in apiData.content"><span>{{row.name}}</span><button @click="remove(row)">remove</button><br></template></div>',
  data: function() {
    return {
    //this data will be loaded from api 
        apiData: {
        total: 20,
        content: [
            {id: 10, name: 'Test'},
            {id: 12, name: 'John'},
            {id: 13, name: 'David'},
        ],
      },
    };
  },
  methods: {
    remove(row) {
        this.apiData.content.splice(this.apiData.content.indexOf(row), 1);
    },
  },
})


new Vue({
  el: '#app',
  methods: {
  isActive(){
    //how can i check if in vue-table apiData.content > 0?
    //return this.$refs.table.apiData.data.length > 0;
  },
  },
})

http://jsfiddle.net/z11fe07p/2806/

所以我想在vue-table apiData.content.length＆gt;的长度时将span的类更改为'active'。 0

我该怎么做？

Answer 1

标准做法是在孩子身上发出一个事件，让父母接受并采取行动。您可能想知道是否可以观察数组的长度 - 在实例化组件时甚至不存在 - 并且答案是肯定的。

查看watch部分。国际海事组织，这太酷了，可能不赞成。

＆＃13;

Vue.component('vue-table', {
  template: '<div><template v-for="row in apiData.content"><span>{{row.name}}</span><button @click="remove(row)">remove</button><br></template></div>',
  data: function() {
    return {
      //this data will be loaded from api 
      apiData: {},
    };
  },
  methods: {
    remove(row) {
      this.apiData.content.splice(this.apiData.content.indexOf(row), 1);
    },
  },
  watch: {
    'apiData.content.length': function(is, was) {
      this.$emit('content-length', is);
    }
  },
  created() {
    this.apiData = {
      total: 20,
      content: [{
        id: 10,
        name: 'Test'
      }, {
        id: 12,
        name: 'John'
      }, {
        id: 13,
        name: 'David'
      }, ],
    };
  }
})


new Vue({
  el: '#app',
  data: {
    isActive: false
  },
  methods: {
    setActive(contentLength) {
      this.isActive = contentLength > 0;
    }
  },
})

＆＃13;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.active {
  font-weight: bold;
}

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <p>
    <span :class="{active: isActive}">Users:</span>
  </p>
  <vue-table refs="table" @content-length="setActive"></vue-table>
</div>

＆＃13;

vue组件数据在

1 个答案: