vue.js - 尝试将输入元素绑定到vue页面中的数据值

问题描述

我有这张表，你可以在下面看到。我正在尝试将输入元素绑定到您也可以在下面看到的“project_settings”对象值。根据复选框是否被选中，project_settings 对象内的值应该改变。但是每当我单击作为开关的输入元素时，我都会收到这两个错误。它就像一个复选框：

error1: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'project_settings' of null"

error2: TypeError: Cannot read property 'project_settings' of null
at callback (app.js:78643)
at invokeWithErrorHandling (app.js:81219)
at VueComponent.invoker (app.js:81544)
at invokeWithErrorHandling (app.js:81219)
at VueComponent.Vue.$emit (app.js:83245)
at VueComponent.Vue.<computed> [as $emit] (backend.js:1793)
at VueComponent.updateInput (app.js:73355)
at invokeWithErrorHandling (app.js:81219)
at HTMLInputElement.invoker (app.js:81544)
at HTMLInputElement.original._wrapper (app.js:86903)

我该怎么办？在下面查看我的vue代码

data() {
 return {
  project_settings: {
    resource: true,
    zone: true,
    contractor: true,
    responsible_person: true,
  },
};

这是我的 vue 页面中的 html 表

<table class="table table-striped" id="tblOne">
                <thead>
                  <tr>
                    <th>Punkt</th>
                    <th>Kräv</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Resurs</td>
                    <td>
                      <p-check
                        class="p-switch p-bigger"
                        color="warning"
                        id="resource"
                        v-model="this.project_settings.resource"
                      ></p-check>
                    </td>
                  </tr>
                  <tr>
                    <td>Zone</td>
                    <td>
                      <p-check
                        class="p-switch p-bigger"
                        color="warning"
                        id="zone"
                        v-model="this.project_settings.zone"
                      ></p-check>
                    </td>
                  </tr>
                  <tr>
                    <td>Contractor</td>
                    <td>
                      <p-check
                        class="p-switch p-bigger"
                        color="warning"
                        id="contractor"
                        v-model="this.project_settings.contractor"
                      ></p-check>
                    </td>
                  </tr>
                  <tr>
                    <td>Responsible person</td>
                    <td>
                      <p-check
                        class="p-switch p-bigger"
                        color="warning"
                        id="responsible_person"
                        v-model="this.project_settings.responsible_person"
                      ></p-check>
                    </td>
                  </tr>
                </tbody>
              </table>

标签： vue.js

vue.js - 尝试将输入元素绑定到vue页面中的数据值

问题描述

解决方案

推荐阅读