使用 v-if 时什么都不显示答案

【问题标题】：Nothing is displayed when using v-if使用 v-if 时什么都不显示
【发布时间】：2021-01-16 04:04:30
【问题描述】：

我正在使用 Vue.js 框架制作一个小型原型应用程序，但遇到了问题。我想始终显示带有显示按钮的输入字段，但有条件地显示一些文本。听起来很简单，但当我尝试这个时，它只显示一个空白页。这是我的组件代码：

<template>
  <div class="box">
    <input v-model="password" :type = "show === false ? 'text' : 'password'" placeholder="Password">
    <button type="button" @click="show = ! show">Show</button>

    Your password was scored {{ strengthPercentage }}%

        <div v-if="strengthLevel === 1">Your password is very easy to guess. Add some more characters.</div>
        <div v-if="strengthLevel === 2">Your password is not very strong. Add some variations.</div>
        <div v-if="strengthLevel === 3">Your password is quite good. You could still use some more variations though</div>
        <div v-if="strengthLevel === 4">Your password is strong enough. Feel free to use it!</div>
  </div>
</template>

<script>
export default {
name: "PasswordField",

  data: function() {
  return {
    password : '',
    show : false,
  }
  },

  computed: {
      strengthPercentage() {
        let score = 0;
        if(this.password == ""){ return score; }

        for(let i = 0; i<this.password.length; i++){
          if(i<7) {
            score += 5;
          } if(i<9){
            score += 2;
          }
        }

        let variations = {
          digits: /\d/.test(this.password),
          lowercase: /[a-z]/.test(this.password),
          uppercase: /[A-Z]/.test(this.password),
          special: /\W/.test(this.password)
        }

        let variationCount = 0;
        for(let check in variations){
          if(variations[check] === true){ variationCount++; }
        }

        score += (variationCount - 1) * 10;
        if(score>100){ score = 100;}
        return Math.ceil(parseInt(score));
  },

    strengthLevel(){
        let percentage = this.strengthPercentage();
        if(percentage < 30) { return 1; }
        if(percentage < 60) { return 2; }
        if(percentage < 80) { return 3; }
        else { return 4; }
    }
  }
}
</script>

<style scoped>
</style>

有什么想法吗？

【问题讨论】：

标签： javascript html vue.js components webstorm

【解决方案1】：

如果您查看浏览器控制台，您会看到以下错误消息：

[Vue 警告]：渲染错误：“TypeError: this.strengthPercentage is not a function”

那指向：

export default {
  computed: {
    strengthPercentage() {...},
    strengthLevel() {
      let percentage = this.strengthPercentage(); // Error: 'this.strengthPercentage' is not a function
    }
  }
}

虽然计算的 props 被声明为函数，但它解析为一个 getter，因此您可以将它作为一个简单的属性来访问：

// BEFORE:
// let percentage = this.strengthPercentage();

// AFTER:
let percentage = this.strengthPercentage;

demo

【讨论】：

【解决方案2】：

您需要格式化您的代码替换

 <input v-model="password" :type = "show === false ? 'text' : 'password'" placeholder="Password">
<button type="button" @click="show = ! show">Show</button>

有

<input  :type="show==false ? 'password' : 'text'" placeholder="" v-model="password" name="password">
<button type="button" @click="show=!show">Show</button>

示例代码片段

var app = new Vue({
  el: "#app",
  data () {
    return {
      show: false,
      password: '',
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="box" id="app">
    <input  :type="show==false ? 'password' : 'text'" placeholder="" v-model="password" name="password">
    <button type="button" @click="show=!show">Show</button>

 </div>

【讨论】：

【解决方案3】：

您应该使用show 作为计算数据，并且您希望显示的文本为data。因此，您可以使用方法更改该数据。您忘记在方法中定义您的函数strengthLevel。

我会向你推荐这些阅读：

这里给你一个代码的想法：https://gist.github.com/andersonbosa/6651d9e8bb89e2c9a0bccf8a257f7be5

【讨论】：