Question

我刚刚开始使用Vue，但有一个非常简单的问题，我无法上班！我正在尝试创建一个已安装的事件，该事件运行一个带有特定参数的方法，以更改元素的“显示”值。这是代码：

export default {
    data(){
        return {
            one: false,
        }
    },
    methods: {
        show: function(el) {
            this.el = true;
        }
    },
    mounted(){
        this.show(this.one)
    }
}

我希望“ el”只是传递给方法的任何“数据”名称的通用占位符。将来我可能不仅会拥有“一个”，而且还会拥有“两个”，“三个”和“四个”。我希望“ show”方法能够接受对这4个选项之一的任何引用，并将其值从false更改为true。

在show方法中，出现错误“'el'已定义但从未使用过”。我唯一想到的解决方案是执行一个if方法“ if this.one === el {...}”，但这样做会达到目的。任何帮助将不胜感激

Answer 1

您可以执行以下操作：

export default {
  data(){
    return {
      one: false,
      two: false 
    }
  },
  methods: {
    doSomething(el) {
      this[el] = true;
    }
  },
  mounted(){
     //Also works with vue props!
    this.doSomething('one')
    this.doSomething('two')
  }
}

但是，如果函数更复杂，则应该为此建立一个组件。多数民众赞成的方式。

Answer 2

new Vue({
  el: '#editor',
  data: {
    el: false,
    item : ''
  },
  computed: {
    
  },
  methods: {
    show (passedValue, item) {    
    this.item = item
      this.el = passedValue
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<div id="editor">


<div id="div1" v-if="el===true && item =='div-1'" class="show">
div1 displayed
</div>
<div id="div-2" v-if="el===true && item =='div-2'" class="show">
div2 displayed
</div>
<button v-on:click="show(true, 'div-1')">show div1</button>
<button v-on:click="show(false, 'div-1')">hide div1</button>

<button v-on:click="show(true, 'div-2')">show div2</button>
<button v-on:click="show(false, 'div-2')">hide div2</button>
</div>

Answer 3

export default {
data(){
    return {
        one: false,
    }
},
methods: {
    show(bol) {
        this.one = bol;
    }
},
mounted(){
    this.show(this.one)
}
}

使用上面的代码将起作用。

根据方法参数更改Vue数据

3 个答案: