данные компонента vue смотреть снаружи

В моем приложении у меня есть компонент, и я хочу, чтобы его свойства находились вне компонента. Я создал этот пример:

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> 0

Как я могу это сделать?


vue.js vue-component watch
person john_zuk    schedule 04.02.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Стандартной практикой было бы испустить событие в дочернем элементе, чтобы родитель принял его и действовал в соответствии с ним. Вы можете задаться вопросом, можете ли вы отслеживать длину массива - такого, которого даже не существует, когда компонент создается, - и ответ будет положительным.

Посмотрите на раздел watch. ИМО, это так круто, что, наверное, не одобряют.

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;
    }
  },
})
#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;
}
<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>

person Roy J    schedule 04.02.2018