将特定键的数据从 javascript 传递给 vue

Question

我是 vue 新手，有一个网络应用程序。 在 javascript 中，有查询集数据，其中包含标题、作者等键。 我想把title key对应的值传给vue。 我怎么能这样做？

我试过 book.title，但在 vue 中出现错误。

            <tbody>
        <tr v-for="(row, index) in filteredRows" :key="`iSBN-${index}`">
            <td v-html="highlightMatches(row.title)">{{ row.title }}</td>
            <td>{{ row.author }}</td>

        </tr>
        </tbody>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

                <script>
        var book = {{ query_results_book_json|safe}};
        console.log(book);
        const app = new Vue({
            el: '#app',
            data: {
                filter:'',
                rows: [
                    { title: book.title, author: '' }
                ]
            }
})
</script>

Answer 1

data 属性必须是函数。

const book = {title: 'Some Title', author: 'Some Author'};

const app = new Vue({
  el: '#app',
  data: () => ({
    filter: '',
    rows: [book]
  }),
  mounted() {
    console.log(this.rows);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>