Question

使用v-for，我无法显示价格和尺寸。我如何写v-for？我需要v-bind：key吗？

我试图设置v-bind：key，但是我真的不知道该怎么做。

HTML

<tbody v-for="item in getMenyItems">
          <tr>
            <td>
              <strong>{{ item.name }}</strong>
            </td>
          </tr>
          <tr v-for="option in item.options" v-bind:key="option.size">
            <td>{{ option.size }}</td>
            <td>{{ option.price }}</td>
            <td>
              <button class="btn btn-sm btn-outline-success" type="button">
                +
              </button>
            </td>
          </tr>
        </tbody>

JavaScript

export default {
    data() {
      return {
        getMenyItems: {
          1: {
            name: "Margherita",
            description:
              "A delicious tomato based pizza topped with mozzarella",
            option: [
              {
                size: 9,
                price: 6.95
              },
              {
                size: 12,
                price: 10.95
              }
            ]
          },
        }
      };
    }
  };

我希望会显示尺寸和价格。

Answer 1

上面的代码可以这样写，以访问item对象的键和值这可以解决您的问题

      <tbody v-for="(item, key, index) in getMenyItems" :key="key">
          <tr>
            <td>
              <strong>{{ item.name }}</strong>
            </td>
          </tr>
          <tr v-for="(option, k, ind) in item.options" v-bind:key="ind">
            <td>{{ option.size }}</td>
            <td>{{ option.price }}</td>
            <td>
              <button class="btn btn-sm btn-outline-success" type="button">
                +
              </button>
            </td>
          </tr>
        </tbody>

Answer 2

您的数据中有错字。您已在数据中声明了选项，但尝试对选项进行迭代。如下更改数据。

getMenyItems: {
    1: {
        name: "Margherita",
        description: "A delicious tomato based pizza topped with mozzarella",
        options: [
            {
                size: 9,
                price: 6.95
            },
            {
                size: 12,
                price: 10.95
            }
         ]
     }
}

您可以按如下所示将密钥添加到tbody。

<tbody v-for="item in getMenyItems" v-bind:key="item">

Answer 3

此问题可能出在您的“ getMenyItems”中。试试这个：

getMenyItems: [
      {
        name: "Margherita",
        description:
          "A delicious tomato based pizza topped with mozzarella",
        options: [
          {
            size: 9,
            price: 6.95
          },
          {
            size: 12,
            price: 10.95
          }
        ]
      },
    ]

使用v-for和v-bind：key

3 个答案: