无法通过单击 Vue.js 3 中的按钮来调整 div 大小

Question

我正在尝试使用 Vue.js 3 调整 DIV 块的大小，但是当我单击按钮时，会弹出“无法读取未定义的属性（读取“样式”）”。我知道 JavaScript 部分是错误的，但我该如何纠正它。

这是代码的 HTML 部分：

<div ref="block2">
  <button v-on:click="changeWidth()"></button>
</div>

这是 JavaScript：

methods: {
  changeWidth:function()
    this.$refs.block2.style.width = "150px";
  }     
}

这是 DIV 上的 CSS 样式：

#block2 {
  position:absolute;
  z-index:5000;
  width:50px;
  height:50px;
  background-color: #7d7d7d;
  transition: all .3s ease-in;
}

Answer 1

由于您想在按下按钮时执行操作，因此在我的示例中，始终有一个变量来捕获当前状态和一个用于输入字段的变量。当然，它也可以是动态的，以便在输入字段更改时轻松调整大小，而无需按下按钮。

在 Vue 3 中，我建议放弃使用 Vue 2 中流行的 Options API，而是遵循 Composition API 的准则。它为 Vue 提供了更加动态的编码风格。

解决方案#1：使用 REF 元素调整大小

我将容器声明为名为

container

的引用。此外，我创建了一个在按下按钮时运行的

resize()

函数。此时，我将

currentValue

的值传递给 ref 组件的

style.width

和

style.height

属性。

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const container = ref(null)
    const currentValue = ref(100)
    
    const resize = () => {
      container.value.style.width = `${currentValue.value}px`
      container.value.style.height = `${currentValue.value}px`
    }
    
    return { currentValue, container, resize }
  },
}).mount('#app')

.container {
  width: 100px;
  height: 100px;
  background: #363635;
  color: #fff;
  margin: 20px 0;
  overflow: hidden;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <div ref="container" class="container"></div>
  
  <input v-model="currentValue" type="number" min="1">
  <button @click="resize">Resize container to {{ currentValue }}px</button>
</div>

解决方案#2：使用 CSS 属性调整大小

我声明了一个名为

nowValue

的变量，其中存储容器的当前像素大小。我创建了一个

resize()

函数，该函数在按下按钮时运行，并将

currentValue

的值从输入复制到

nowValue

变量中。在CSS代码中有多种使用

nowValue

的方法；目前，我只是传递样式 HTML 属性中的值。这样，当

nowValue

更新时，DOM 会自动采用新值。

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const nowValue = ref(100)
    const currentValue = ref(100)
    
    const resize = () => {
      nowValue.value = currentValue.value
    }
    
    return { currentValue, nowValue, resize }
  },
}).mount('#app')

.container {
  width: 100px;
  height: 100px;
  background: #363635;
  color: #fff;
  margin: 20px 0;
  overflow: hidden;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="container" :style="{ width: `${nowValue}px`, height: `${nowValue}px` }"></div>
  
  <input v-model="currentValue" type="number" min="1">
  <button @click="resize">Resize container to {{ currentValue }}px</button>
</div>

Answer 2

你是对的，JS 也有 HTML 的问题。 这是正确的代码： HTML：

<div ref="block2" id="block2">
  <button v-on:click="changeWidth()">Resize</button>
</div>

JS：

methods: {
  changeWidth: function() {
    const block2 = this.$refs.block2[0]; // Access the actual DOM element
    if (block2) {
      block2.style.width = "150px"; // Set the width property
    } else {
      console.error("Element with ref 'block2' not found");
    }
  }
}

我希望它有帮助:)

Answer 3

愚蠢，我只需要添加

id="block2"

All working fine....