Javascript 如何在Vue.JS的子组件中使用输入编号？

我正在做一个项目，目前我可以通过点击按钮创建可拖动的div。现在，我希望能够通过输入更改这些div的大小。 我的问题是我不知道怎么做。 你能帮我吗

首先，这是我的App.vue：

<template>
<div id = 'dd'>
  <div>
    <input type = "Number" v-model="length" placeholder="Longueur de la boîte">
    <input type = "Number" v-model="width" placeholder="Largeur de la boîte">

    <Bouton @clic-bouton="apply" text="Appliquer" color='pink'></Bouton>
  </div>
  <Bouton @clic-bouton="addDraggableDiv" text="Ajouter" color="cyan"></Bouton>

  <DraggableDiv class="col-11" v-for = "index in count" :key="index">
    <template>

    </template>
  </DraggableDiv>
</div>


</template>

<script>
import DraggableDiv from './components/DraggableDiv.vue'
import Bouton from './components/Bouton.vue'


export default {
  name: 'App',
  data(){
    return{
      count : 1,
      length : 240,
      width : 156,
    }
  },
  components: {
    DraggableDiv,
    Bouton,
  },
  methods:{
  addDraggableDiv(){
      this.count+=1
  },

}
}
</script>

<style>


</style>

从“./components/DraggableDiv.vue”导入DraggableDiv
从“./components/Bouton.vue”导入Bouton
导出默认值{
名称：“应用程序”，
数据（）{
返回{
计数：1，
长度：240，
宽度：156，
}
},
组成部分：{
DraggableDiv，
鲍顿，
},
方法：{
AddDragableDiv（）{
这个值为0.count+=1
},
}
}

然后，这里是我要用输入更新的DraggableDiv.vue：

<template>
  <div>

    <div ref="draggableContainer" id="draggable-container" @mousedown="dragMouseDown" :style='taille'>
      
    </div>
  </div>
</template>

<script>
import App from "../App.vue"

export default {
  name: 'DraggableDiv',
  data: function () {
    return {
      positions: {
        clientX: undefined,
        clientY: undefined,
        movementX: 0,
        movementY: 0,
        App
      }
    }
  },
  props:{
    length : {
      type: Number,
    },
    width : {
      type: Number,
    }
    },
    computed :{
      taille(){
        return{
          '--longueur': this.length + 'px',
          '--largeur': this.width + 'px'
        }
      }
    },
  methods: {
    dragMouseDown: function (event) {
      event.preventDefault()
      // get the mouse cursor position at startup:
      this.positions.clientX = event.clientX
      this.positions.clientY = event.clientY
      document.onmousemove = this.elementDrag
      document.onmouseup = this.closeDragElement
    },
    elementDrag: function (event) {
      event.preventDefault()
      this.positions.movementX = this.positions.clientX - event.clientX
      this.positions.movementY = this.positions.clientY - event.clientY
      this.positions.clientX = event.clientX
      this.positions.clientY = event.clientY
      // set the element's new position:
      this.$refs.draggableContainer.style.top = (this.$refs.draggableContainer.offsetTop - this.positions.movementY) + 'px'
      this.$refs.draggableContainer.style.left = (this.$refs.draggableContainer.offsetLeft - this.positions.movementX) + 'px'
    },
    closeDragElement () {
      document.onmouseup = null
      document.onmousemove = null
    }
  }
}
</script>

<style>
#draggable-container {
  position: absolute;
  z-index: 9;
  height: var(--longueur);
  width: var(--largeur);
  background-color: rgb(170, 104, 43);
  border-color: black;
  border: 2px solid;
}

</style>

从“./App.vue”导入应用程序
导出默认值{
名称：'DragableDiv'，
数据：函数（）{
返回{
职位：{
clientX：未定义，
克利提：没有定义，
movementX:0，
移动：0，
应用程序
}
}
},
道具：{
长度：{
类型：数字，
},
宽度：{
类型：数字，
}
},
计算：{
泰尔（）{
返回{
“--longueur”：this.length+'px'，
“--largeur”：this.width+'px”
}
}
},
方法：{
dragMouseDown:函数（事件）{
event.preventDefault（）
//在启动时获取鼠标光标位置：
this.positions.clientX=event.clientX
this.positions.clientY=event.clientY
document.onmousemove=this.element拖动
document.onmouseup=this.closeDragElement
},
elementDrag:函数（事件）{
event.preventDefault（）
this.positions.movementX=this.positions.clientX-event.clientX
this.positions.movementY=this.positions.clientY-event.clientY
this.positions.clientX=event.clientX
this.positions.clientY=event.clientY
//设置元素的新位置：
this.$refs.draggableContainer.style.top=（this.$refs.draggableContainer.offsetTop-this.positions.movementY）+“px”
this.$refs.draggableContainer.style.left=（this.$refs.draggableContainer.offsetLeft-this.positions.movementX）+“px”
},
闭式排水管（）{
document.onmouseup=null
document.onmousemove=null
}
}
}
#拖拉式集装箱{
位置：绝对位置；
z指数：9；
高度：var（--longueur）；
宽度：var（--largeur）；
背景色：rgb（170104,43）；
边框颜色：黑色；
边框：2倍实心；
}

正如你所看到的，我用道具和计算道具做了一些尝试，但似乎不起作用

---

谢谢你的帮助

您的代码离工作不远了

默认情况下，

v-model

将值绑定为字符串，但您可以使用

vmodel.number

修改器自动绑定

number

值（如中所述）：

您好，如果您正在处理数字并输入它，那么可以使用如下命令：
type=“Number”v-model.Number=“length”
。要编辑尺寸，只需更改div元素的高度和宽度。像
这个。$refs.draggableContainer.style.height=新的PX值
@wittgenstein我尝试添加一个名为apply的onclick dunction，它包含这个值。$refs.draggableContainer.style.height=新的PX值，但不起作用，我收到一条错误消息，说我无法读取未定义的属性样式。新的像素值表示您的新像素值，如
158px
或
268px