根据没有jQuery的其他输入更改输入标签的值

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

每当我在中写东西时，我希望输入的值更新为与小写标题的值相同。

Answer 1

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

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的其他输入更改输入标签的值

Change the value of input tag based on other input without jQuery

html

vue.js

vuejs2

bootstrap-vue