1

所以我可以这样做（Pug& CoffeeScript）：

input(placeholder="0", v-model.number="order[index]" v-on:change="adjustInput")
...
adjustInput: ->
    event.target.style.width = event.target.value.length + 'ch'

...但它只有在我手动更改浏览器中的输入时才有效。如果更改，输入不会更改其宽度v-model。

即使更改是由于反应性引起的，如何才能使输入宽度发生变化Vue？

4

2 回答 2

1

检查这个，但你必须检查输入和 fake_div 上的字体大小 

var app = new Vue({
  el: '#app',
  data() {
  return {
    order: 1, // your value
    fakeDivWidth: 10, // width from start, so input width = 10px
  };
},
watch: {
  order: {  // if value from input changing
    handler(val) {
      this.inputResize();
    },
  },
},
methods: {
  inputResize() {
    setTimeout(() => {
      this.fakeDivWidth = this.$el.querySelector('.fake_div').clientWidth;
    }, 0);
  },
},
})
.fake_div {
  position: absolute;
  left: -100500vw;
  top: -100500vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input placeholder="0" v-model.number="order" v-bind:style="{width: fakeDivWidth + 'px'}" >
<div class="fake_div">{{ order }}</div> // fake_div needed to see this div width
// этот блок фейковый и нужен только для того, что бы наш input становился такого же размера как этот div
  </div>

于 2021-03-02T20:38:04.483 回答
0

尝试这个

input(placeholder="0", v-model.number="order[index]" v-on:change="adjustInput" :style="{width: reactiveWidth}")

// Your secret Vue code
data() {
   return function() {
       reactiveWidth: 100px; // (some default value)
   }
},
methods: {
  adjustInput() {
     this.reactiveWidth = event.target.value.length + 'ch'
  }
},
computed: {
   reactiveWidth() {
     return this.number + 'ch';
  }
}

由于我不知道代码的所有部分，您可能需要稍微调整一下。只需绑定this.number到 aorder[index]就不会以任何方式影响输入的宽度。计算属性监听数字的变化

于 2019-10-14T09:15:01.590 回答