Как передать var obj методу в Vue.js

Question

Код, как показано ниже:

<el-input v-model="ruleForm.vol" @change="calValue(vol,ruleForm.vol)">
  <template slot="suffix">{{ vol }}</template>
</el-input>

data() {
  return {
    vol: 0,
    ruleForm: {
       vol: 0
    }      
  }
},
methods: {
  calValue(objCal, obj) {
    console.log(objCal)
    console.log(eval(obj))
    objCal = eval(obj)
    console.log(objCal)
  }
}

Когда я набираю 1 + 1 в поле ввода, суффикс не изменяется. Как это решить?

Answer 1

Во-первых (то, что вы, возможно, уже знаете, но ...), избегайте использования eval в производстве, особенно когда пользовательский ввод играет фактор.Это открывает ваше приложение для различных уязвимостей безопасности, а именно для внедрения сценариев и межсайтовых сценариев (подробнее о XSS ).

Во-вторых, вы не устанавливаете новое значение для vol здесь, следовательно, оно не меняется.Внутри вашего calValue метода убедитесь, что вы установили для него новое значение.

<el-input v-model="ruleForm.vol" @change="calValue(vol, ruleForm.vol)">
  <template slot="suffix">{{ vol }}</template>
</el-input>

data() {
  return {
    vol: 0,
    ruleForm: {
       vol: 0
    }      
  }
},
methods: {
  calValue(objCal, obj) {
    console.log(objCal)
    console.log(eval(obj))
    objCal = eval(obj)
    this.vol = objCal
  }
}

(!) Но еще лучший подход для этого - использовать вычисленное значение Vueсвойства .С их помощью ваш код теперь будет выглядеть так:

<el-input v-model="vol">
  <template slot="suffix">{{ result }}</template>
</el-input>

data() {
  return {
    vol: 0
  }
},
computed: {
  result () {
    return eval(this.vol)
  }
}

Обратите внимание, что вам не нужен метод и слушатель @change, поскольку v-model уже меняет сопоставленное значение на каждом @input позадисцены (подробнее об этом здесь ).

Опять же - если вы создаете калькулятор или что-то подобное и хотите знать о безопасности, вы, вероятно, проанализируете пользовательский ввод 1 + 1 в {argument} {operator} {argument} и затем вызовите метод на основе operator, который использовал пользователь.

Надеюсь, это поможет!