如何在 vue.js 的 v-if 中使用 toLowerCase()？

Question

在 vue.js 中，我有以下代碼：

 <q-btn @click="goEditMode" color="primary" icon="edit" label="Edit"
     v-if="this.form.userName.toLowerCase() !== 'admin'" />

添加toLowerCase()后出現錯誤。

這是錯誤：

[Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"

請幫助我，謝謝！

Answer 1

你必須刪除你的this. 在您的模板中

v-if="form.userName.toLowerCase() !== 'admin'"

---

演示：

 Vue.createApp({ data() { return { query: 'oNe' } } }).mount('#app')

 <script src="https://unpkg.com/vue@next"></script> <div id="app" class="demo"> <div v-if="query.toLowerCase().== 'one'">one</div> <div v-if="query.toLowerCase() !== 'two'">two</div> </div>

演示2：

您可以創建一個計算屬性來返回一個條件：

 Vue.createApp({ data() { return { role: 'aDmIn' } }, computed: { isAdmin() { if (this.role.toLowerCase() === 'admin') { return true } else { return false } } } }).mount('#app')

 <script src="https://unpkg.com/vue@next"></script> <div id="app" class="demo"> <div v-if="isAdmin">is admin</div> <div v-if="!isAdmin">is user</div> </div>

Answer 2

由於undefined.toLowerCase()發生此錯誤。

看起來您正在對其父級中不存在的某些屬性運行toLowerCase 。

所以首先檢查this.form.userName是否存在。

您可以執行類似的操作。

this.form.userName ? this.form.userName.toLowerCase() : ''

Answer 3

v-if="this.form.userName && this.form.userName.toLowerCase() !== 'admin'" />

你可以這樣做。