Question

我正在使用Vue.js构建一个分离的应用程序，使用WordPress的Rest API中的数据。该应用程序包括“按类别排序”功能。我无法使用原始表单输入来完成此操作，而仍然无法匹配设计，因为我需要使用Vue组件列出类别。我的问题是我无法在组件的模板中填充类别的名称。

组件代码：

Vue.component( 'sort-button', {
        props: ['value'],
        template: `
          <button class="button button-accent"
            v-bind:value="value"               
            v-on:input="$emit( 'input', $event.target.value )"
          >
          <a href="#">{{ cat.name }}</a>
        `
    }
);

我将其显示为in-DOM模板，如下所示：

<sort-button v-for="cat in portfolioCats"></sort-button>

如果我将模板的标签内容保留为静态或空白，则这将循环遍历每个类别并给我一个相应的按钮。但是，如果我使用{{cat.name}}的胡须，则会出错，因为未定义cat。

我的问题：如何在for循环的上下文中使模板意识到cat？请注意，我希望这是一个可重用的组件，可以将其插入网站中的其他Vue实例。

谢谢！

Answer 1

您需要传递变量cat作为道具。

is

并将其添加到props数组。

<sort-button v-for="cat in portfolioCats" :cat="cat"></sort-button>

Answer 2

组件中未定义

cat。您需要一个道具，还需要提供value的值。

<sort-button v-for="cat in portfolioCats" :name="cat.name" :value="cat.value"></sort-button>

因此您的模板应该是

Vue.component( 'sort-button', {
    props: ['value', 'name'],
    template: `
      <button class="button button-accent"
        v-bind:value="value"               
        v-on:input="$emit( 'input', $event.target.value )"
      >
      <a href="#">{{ name }}</a>
    `
});

也，按钮通常不会发生input个事件，因此尚不清楚您期望在那里发生什么。您可能想要一个click事件。

刚刚注意到您也没有关闭<button>标签。在按钮内放置锚点很奇怪。也许您希望按钮在锚点之前关闭。

Answer 3

一种选择是使用插槽，以便您可以从父上下文定义内容。例如

<button class="button button-accent"
        :value="value"               
        @input="$emit( 'input', $event.target.value )">
  <slot></slot>
</button>

在父级中...

<sort-button v-for="cat in portfolioCats" v-model="something" :key="cat.id">
  <a href="#">{{ cat.name }}</a>
</sort-button>

组件中的Vue.js动态值

3 个答案: