Vue JS 根据始终传递的道具数据获取挂载数据 return false

Question

我需要在挂载 vue 组件时获取最新数据，但需要先检查 props。但它总是变得不确定。看起来像这段代码

Vue.component('book', {
    props: ["showLatest"],
  data: function() {
    return {
        books: null
    }
  },
  template: '<ul><li v-for="book in books">This is a book {{ book.name }} <small><i>{{ book.publisher}}</i></small></li></ul>',
  method: {
    fetch: function() {
        this.books = [
        {
          name: "Latest 1",
          publisher: "publisher_test1"
        },
        {
          name: "Latest 2",
          publisher: "publisher_test2"
        },
        {
          name: "Latest 3",
          publisher: "publisher_test3"
        }
      ];
    }
  },
  mounted: function() {
    console.log(this.showLatest);
    if(!this.showLatest) {
            this.books = [
        {
          name: "Test 1",
          publisher: "publisher_test1"
        },
        {
          name: "Test 2",
          publisher: "publisher_test2"
        },
        {
          name: "Test 3",
          publisher: "publisher_test3"
        }
      ];
    } else {
        this.fetch();
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Digital Library!'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}
  <book :showLatest="true"></book>
</div>

为什么 showLatest 总是得到 undefined。如果这不是好方法，如何让它工作..？希望有人能帮忙

提前致谢

Answer 1

prop 应该以 kebab-case 格式编写，当它在父组件中使用时 <book :show-latest="true"></book> 或只是 <book show-latest></book> 并且在子组件中修复 method 到 methods :

Vue.component('book', {
    props: ["showLatest"],
  data: function() {
    return {
        books: null
    }
  },
  template: '<ul><li v-for="book in books">This is a book {{ book.name }} <small><i>{{ book.publisher}}</i></small></li></ul>',
  methods: {
    fetch: function() {
        this.books = [
        {
          name: "Latest 1",
          publisher: "publisher_test1"
        },
        {
          name: "Latest 2",
          publisher: "publisher_test2"
        },
        {
          name: "Latest 3",
          publisher: "publisher_test3"
        }
      ];
    }
  },
  mounted: function() {
    console.log(this.showLatest);
    if(!this.showLatest) {
            this.books = [
        {
          name: "Test 1",
          publisher: "publisher_test1"
        },
        {
          name: "Test 2",
          publisher: "publisher_test2"
        },
        {
          name: "Test 3",
          publisher: "publisher_test3"
        }
      ];
    } else {
        this.fetch();
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Digital Library!'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}
  <book :show-latest="true"></book>
</div>

Vue JS 根据始终传递的道具数据获取挂载数据 return false

Vue JS fetch data on mount based on props data passed always return false

javascript

vue.js

vue-component