vue.js TypeError:无法读取null的属性(阅读“subTree”)

bxjv4tth  于 2023-02-05  发布在  Vue.js
关注(0)|答案(2)|浏览(596)

此错误意味着什么?
error message
当我将filteredData变量放入表的tr标记中时,就会发生这种情况。

<table id="table">
    <tr>
      <th>First name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Original email</th>
      <th>Actions</th>
    </tr>
    <template>
      <tr v-if="(fiteredData = '')">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr
        v-else
        v-for="data in filteredData"
        :key="data.ind_id"
        :value="data.ind_id"
      >
        <td>{{ data.first_name }}</td>
        <td>{{ data.last_name }}</td>
        <td>{{ data.email }}</td>
        <td>{{ data.email }}</td>
        <td>
          <button @click="sendProps(data)">
            <i class="fa-regular fa-edit" aria-hidden="true"></i>
          </button>
        </td>
      </tr>
    </template>
  </table>

这是我的方法:

data() {
    return {
      fetchedData: "",
      filteredData: "",
    };
  },
  methods: {
    searchResult(e) {
      this.filteredData = this.fetchedData.filter((data) => {
        return data.email.toLowerCase().includes(this.email.toLowerCase());
      });
      e.preventDefault();
      console.log(this.filteredData);
    }

fetchedData从以下位置获取数据:

async mounted() {
    await axios.get("http://localhost:5000/individuals").then((result) => {
      this.fetchedData = result.data;
      console.log(this.fetchedData);
    });
  },
afdcj2ne

afdcj2ne1#

我猜是这样的:<tr v-if="(filteredData = '')">应为:<tr v-if="filteredData === ''">,甚至更好:您拼错了变量名,并且意外地将其设置为空字符串,而不是进行比较(我确信我们都遇到过这种情况)
与此相关的是,我将把fetchedDatafilteredData初始化为空数组,而不是字符串,因为v-for是用来迭代对象和数组的,而不是字符串(尽管它可能足够聪明,能够处理它)。

qyuhtwio

qyuhtwio2#

当我在过去遇到这个问题时,是浏览器本身有问题,在新的私有窗口中打开我的应用程序可以工作。

相关问题