Question

     <div v-for="value in day" class="checkboxFour">
   <input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
 <label for="need" style=" width: 30%!important;">{{value.name}}</label>
      <select v-model="value.from" class="select-style">From
      <option value="08:00">08.00</option>
          <option value="12:00">12.00</option>
          <option value="20:00">20.00</option>
          <option value="23:00">23.00</option>
        </select>
        <select v-model="value.to" class="select-style">To
          <option value="08:00">08.00</option>
          <option value="12:00">12.00</option>
          <option value="20:00">20.00</option>
          <option value="23:00">23.00</option>
        </select>
        <br>

      </div>

这是选择选项。当我使用required =＆＃34;＆＃34;。我收到了getAttribute错误。我怎样才能纠正它？

另外，在下列情况下如何使用选择？我的目标是先前选择一个特定的值然后用户可以根据他的需要改变？请帮助我获得相同的内容？

Answer 1

如Vue.JS docs中所述，您可以使用v-bind:class来实现您的目标：

<select v-model="value.from" v-bind:class="{required: isRequired}">

其中required是您的应用/组件中的数据，计算字段。

更新1：

    new Vue({
    el: "#myApp",
    data: {
        // you should define a variable in your data
        isRequired: false
    },
    methods: {
        doSomething: function(){
            this.isRequired = true;
        }
    }
});

Answer 2

required attribute是布尔值（不是类）。你不需要给它一个价值;如果它出现在select标签中，则需要选择。

您还可以将其绑定到布尔值，以更改是否需要选择。

＆＃13;

new Vue({
  el: '#app',
  data: {
    isRequired: false
  }
});

＆＃13;

[required] {
  outline: thin solid red;
}

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <select required>
    <option>An option</option>
  </select> This one is always required
  <div>
    <select :required="isRequired">
     <option>Whatever</option>
    </select>
    <input type="checkbox" v-model="isRequired"> Is Required: {{isRequired}}
  </div>
</div>

＆＃13;

如何添加class =＆＃34; required＆＃34;在下面选择v-model？

2 个答案: