Question

我有2个输入标签

Title:
    <b-input
      style="width: 50%"
      v-model="value.title"
      class="input-element"
      placeholder="Title"
      v-on:click="greet"
    />
Id:
    <b-input
      id="id"
      style="width: 50%"
      class="input-element"
      placeholder="Id"
      v-model="value.id"
    />

每当我用编写东西时，我都希望输入的值与小写的title值相同。

Answer 1

您可以使用将标题更改为小写的计算字段，然后使id输入的v模型使用该计算字段

Answer 2

您可以使用观察程序来监视对title所做的任何更改，并将id设置为小写值。

这使用户仍然可以手动更新ID输入。在标题更改时将其覆盖。

new Vue({
  el: '#app',
  data() {
    return {
      value: {
        id: "",
        title: ""
      }
    }
  },
  watch: {
    'value.title'(newVal) {
      this.value.id = newVal.toLowerCase();
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-btn @click="value.title = 'TEST'">Set title to TEST</b-btn><br />
  <label>Title: </label>
  <b-input v-model="value.title"></b-input>
  <label>ID: </label>
  <b-input v-model="value.id"></b-input>

  <div class="mt-2">
  Title: {{ value.title }}<br />
  ID: {{ value.id }}
  </div>
</div>

在没有jQuery的情况下根据其他输入更改输入标签的值

2 个答案: