如何使用选择 VueJS 启用/禁用输入答案

【问题标题】：How to enable / disable an input with a select VueJS如何使用选择 VueJS 启用/禁用输入
【发布时间】：2019-07-01 22:52:26
【问题描述】：

问题来自posted (in Spanish) on es.stackoverflow.com José：

我已经在 JavaScript 中看到了这个示例，是的，它有效并且除了在 vue.js 中可以做到的一切，我一直在尝试虽然它不起作用。很抱歉给您带来不便。

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ name }}</p>
  <input type="text" v-model="name"/>
  <button type="submit" :disabled="name == defaultName">Submit</button>
</div>

>

Javascript

    $(document).ready(function() {
  $('#id_categoria').change(function(e) {
    if ($(this).val() === "1") {
      $('#d').prop("disabled", true);
    } else {
      $('#d').prop("disabled", false);
    }
  })
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <select name='id_categoria' id='id_categoria' >
    <option value="1" selected>Clientes</option>
    <option value="2">Empresas</option>
    <option value="3">Personas</option>
  </select>
  <input id="d" disabled="disabled" type="text" value="test">
</div>

我知道在使用 Vue 时我想直接操作 DOM 很奇怪；我通常让框架这样做，这将是一个可能的解决方案

当然，如果有可能，您应该利用 Vue 的数据驱动响应式特性，因为处理 DOM 总是很棘手。

解决方案是创建另一个变量并填充它

new Vue({
  el: '#app',
  data: {
    name: 'Hello Vue.js!',
    defaultName: null
  },
  mounted() {
    this.defaultName = this.name;
  }

【问题讨论】：

这是因为您尝试使用 jQuery 方法而不是使用 Vue。两者不能很好地混合（在使用 Vue 时，您希望直接操作 DOM 是非常罕见的；通常您让框架来做。）如果您需要帮助让这种事情在 Vue 中工作，您应该包括您的问题中的 Vue 代码，而不仅仅是 jQuery。
使用 Vue，您将不会使用 document.ready 函数，您将拥有一个 JavaScript 对象，即您的 model，并且您的选择和输入控件将绑定到该模型中的元素。有关概述，请参阅Form Input Bindings。你的<input> 可能看起来像<input type="text" id="d" :disabled="categoria==1">
从habilitar/deshabilitar un input con un select复制没有署名

标签： javascript html vue.js

【解决方案1】：

下面是一个使用v-model而不是结合jQuery的vue模板文件

<template>
    <div>
        <select v-model="id_categoria">
            <option value="1" :selected="id_categoria === 1">Clientes</option>
            <option value="2" :selected="id_categoria === 2">Empresas</option>
            <option value="3" :selected="id_categoria === 3">Personas</option>
        </select>
        <input id="d" :disabled="id_categoria === 1" type="text" value="test">
    </div>
</template>
<script>
export default {
    data() {
        return {
            id_categoria: 1,
        };
    },
}
</script>

【讨论】：

【解决方案2】：

试试这个：

new Vue({
  el: "#app",
  data: {
    options: [
      { content: 'Clientes', value: 1 },
      { content: 'Empresas', value: 2 },
      { content: 'Personas', value: 3 }
    ],
    inputDisabled: true
  },
  methods: {
    onChangeSelect(e) {      
      this.inputDisabled = (e.target.value == 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <select @change="onChangeSelect($event)">
    <option v-for="(option, index) in options" :key="index" :value="option.value">
      {{ option.content }}
    </option>
  </select>
  <input :disabled="inputDisabled" type="text" value="test">
</div>

【讨论】：

【解决方案3】：

new Vue({
  el: "#app",
  data: {
    options: [
      { content: 'Clientes', value: 1 },
      { content: 'Empresas', value: 2 },
      { content: 'Personas', value: 3}
    ],
    selectedOption: '',
  },
  computed: {
    inputDisabled() {
      return this.selectedOption === 2;
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <select v-model="selectedOption">
    <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.content }}</option>
  </select>
  
  <input :disabled="inputDisabled" type="text" v-model="selectedOption">
</div>

【讨论】：