Question

我要禁用按钮取决于我单击的行。单击按钮后，我收到此错误的问题。

“属性或方法“ $ event”未在实例上定义，但在渲染期间引用。确保此属性是反应性的，在data选项中或对于基于类的组件，通过初始化属性，渲染错误：“ TypeError：无法读取属性“目标”未定义”。

有人可以帮我如何禁用按钮，这取决于我在桌子上单击的行吗？

           <tbody v-for="(medicine, index) in gulod_medicines">
                <tr v-if="index >= startIndex && index < endIndex">
                    <td>{{medicine.medicine_id}}</td>
                    <td>{{medicine.medicine_name}}</td>
                    <td>{{medicine.quantity}}</td>
                    <td>{{medicine.price}}</td>
                    <td>{{medicine.description}}</td>
                    <td>{{medicine.unit}}</td>
                    <td><button @click="gulodTransactionButton(medicine.medicine_id,medicine.medicine_name,medicine.price,medicine.description,medicine.unit)" v-on:disabled="disableButton(index, $event)" data-toggle="modal" data-target="#myModal3" class="btn bg-success text-light" class="small-box-footer"><i class="fas fa-plus"></i></button>
                    </td>
                </tr>
            </tbody>

           //methods
           disableButton : function(index, event) {
                 event.target.disabled = true;
           }

Answer 1

我要做的是向medicine-> medicine.disabled添加一个键/值，默认情况下，该键/值是一个布尔值，设置为false。然后，当您单击按钮时，将此medicine.disabled设置为true。

在这种情况下，我会这样做：

          <tbody v-for="(medicine, index) in gulod_medicines">
                <tr v-if="index >= startIndex && index < endIndex">
                    <td>{{medicine.medicine_id}}</td>
                    <td>{{medicine.medicine_name}}</td>
                    <td>{{medicine.quantity}}</td>
                    <td>{{medicine.price}}</td>
                    <td>{{medicine.description}}</td>
                    <td>{{medicine.unit}}</td>
                    <td><button @click="gulodTransactionButton(medicine.medicine_id,medicine.medicine_name,medicine.price,medicine.description,medicine.unit, index)" :disabled="medicine.disabled" data-toggle="modal" data-target="#myModal3" class="btn bg-success text-light" class="small-box-footer"><i class="fas fa-plus"></i></button>
                    </td>
                </tr>
            </tbody>

           //methods
           gulodTransactionButton : function (medicine_id, medicine_name, price, description, unit, index) {
                 this.gulod_medicines[index].disabled = true;
           }

已单击按钮时如何禁用按钮取决于其行？

1 个答案: