Question

使用Vue inline template时，我希望以下代码在表格中呈现a，b，c。相反，它没有呈现任何控制台错误。我做错了什么？

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {

    app = new Vue({

      el: '#app',

      data: {
        items: ["a", "b", "c"]
      }
    });

    Vue.component('items-component', {

      props: ['items'],

      computed: {

        showTable: function() {
          return this.items.length > 0
        }
      }
    })
  })
</script>

<div id="app">
  <items-component inline-template>
    <table v-if="showTable">
      <tr v-for="item in items">
        <td>{{item}}</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

首先，您不需要jQuery包装器来运行您的Vue代码。

其次，您应该在组件中指定数据，而不是在构造函数中指定数据。

第三，你期望items-component获得支柱，但不发送任何支柱，你也应该将其删除。数据也必须返回一个对象，它应该是一个函数

下面，工作

https://jsfiddle.net/2yyjy3bc/1/

Vue内联模板无法呈现

1 个答案: