Question

我正在使用v-for循环一些数据并将其显示在表中。我想根据数组中的值之一有条件地显示一些文本

我的html看起来像

  <div id="vue-wrapper">
        <div class="table table-borderless" id="table">
            <table class="table table-borderless" id="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tr :key=item v-for="item in items">
                    <td>@{{ item.module }}</td>
                    <td>@{{ item.enabled }}</td>
                    <div v-if="item.enabled == true">
                        <td>Disable Button </td>
                    </div>
                    <div v-else>
                        <td>Enable Button </td>
                    </div>
                </tr>
            </table>
        </div>
    </div>

我的vue js看起来像

const app = new Vue({
            el: '#vue-wrapper',
            data: {
                items: [{"module":"Blog","enabled":false},{"module":"Booking","enabled":true},{"module":"Review","enabled":true}],
                hasError: true,
                hasDeleted: true,
                newItem: {'name': ''}
            },
            created () {
            //  this.getVueItems()
            },
            methods: {
                getVueItems: function () {
                    axios.get('/api/module/').then(response => {
                        console.log(response.data)
                        this.items = response.data;
                        console.log(this.items);
                    });
                },
                createItem: function () {
                },
                deleteItem: function () {
                },
            }
        });

但是，当我加载页面时，将同时显示禁用按钮和启用按钮的文本。并且有以下错误

“ TypeError：无法读取未定义的已启用属性”

但是我可以在for循环中读取enabled属性，所以我不确定需要更改什么

Answer 1

我认为这与您的td / tr / div标签的使用有关。

            <tr :key=item v-for="item in items">
                <td>@{{ item.module }}</td>
                <td>@{{ item.enabled }}</td>
                <div v-if="item.enabled == true">
                    <td>Disable Button </td>
                </div>
                <div v-else>
                    <td>Enable Button </td>
                </div>
            </tr>

div实际上落在tr之外，并且也没有必要，因为您可以将逻辑放入td中，请尝试使用以下方法：

            <tr :key=item v-for="item in items">
                <td>@{{ item.module }}</td>
                <td>@{{ item.enabled }}</td>
                <td v-if="item.enabled == true">Disable Button</td>
                <td v-else>Enable Button</td>
            </tr>

Answer 2

<div>元素不能是<tr>的直接子元素，因此这些元素会在v-if循环外碰撞。

在这种情况下，您可以将v-if直接放在td上，但是在这种情况下，您可以使用<template>标签代替真实的HTML节点：

const app = new Vue({
  el: '#vue-wrapper',
  data: {
    items: [{
      "module": "Blog",
      "enabled": false
    }, {
      "module": "Booking",
      "enabled": true
    }, {
      "module": "Review",
      "enabled": true
    }],
    hasError: true,
    hasDeleted: true,
    newItem: {
      'name': ''
    }
  },
  created() {
    //  this.getVueItems()
  },
  methods: {
    getVueItems: function() {
      axios.get('/api/module/').then(response => {
        console.log(response.data)
        this.items = response.data;
        console.log(this.items);
      });
    },
    createItem: function() {},
    deleteItem: function() {},
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="vue-wrapper">
  <div class="table table-borderless" id="table">
    <table class="table table-borderless" id="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tr  v-for="item in items">
        <td>@{{ item.module }}</td>
        <td>@{{ item.enabled }}</td>
        <template v-if="item.enabled == true">
          <td>Disable Button </td>
        </template>
        <template v-else>
          <td>Enable Button </td>
        </template>
      </tr>
    </table>
  </div>
</div>

v-如果在v-for内部不工作

2 个答案: