Question

我已经在JavaScript中看到了该示例，是的，它可以正常工作，但是正如我可以在 vue.js 中做到的那样，我已经尝试了一段时间，但它不起作用。抱歉给你带来不便。

当您使用Vue时，我想直接操作DOM很奇怪。我通常会让框架这样做，这可能是一种解决方案

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

解决方案是仅创建另一个变量并将其填充到

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

<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>

Answer 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>

Answer 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>

Answer 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>

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

3 个答案: