Creé un contador con vue.js. Usé un método con un método if para deshabilitar un botón (si el conteo> 5, el botón de incremento está deshabilitado). Pero no entiendo por qué deshabilitó todos mis botones . Si alguien me puede ayudar, será muy bueno!
Ahí está el código:
<body> <div id="app"> <button @click="count++" v-bind:disabled="blockCount">increment</button> <button @click="count--">decrement</button> <p>The count is {{ count }}</p> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> <p v-if="count >= 7" blockCountChange()> </p> </div> <script> const example1 = new Vue({ el: '#app', data: { message: 'Hello Vue ! Just a test', count:'', blockCount: false }, methods: { reverseMessage: function () { this.message = this.message.split(' ').reverse().join(' ') }, blockCountChange: { function() { if (this.count>5) { return this.blockCount = true; } } } } }); </script> </body>No estoy seguro de todos los asteriscos aleatorios en el código, pero estoy bastante seguro de que quería usar una propiedad calculada
export default { data() { return { count: 0, } }, computed: { blockCount() { return this.count > 5 } } }en Vue, todo en la propiedad de datos está envuelto en un proxy reactivo, esto significa que cualquier cosa que use esa propiedad recibirá un evento de cambio de valor cuando cambie el valor, esto significa que no necesita actualizar manualmente el valor de blockCount , usted puede usar una propiedad calculada para monitorear el valor de conteo y devolver un valor precalculado
esto también eliminará coincidentemente el
<p v-if="count >= 7" blockCountChange()> </p>que es creo que la fuente real del problema que está teniendo
esto significa que su código se vería así
<body> <div id="app"> <button @click="count++" :disabled="blockCount">increment</button> <button @click="count--">decrement</button> <p>The count is {{ count }}</p> <p>{{ message }}</p> <button @click="reverseMessage">Reverse Message</button> </div> <script> const example1 = new Vue({ el: "#app", data() { return { message: "Hello Vue ! Just a test", count: 0,//this is a number so use a number } }, computed:{ blockCount(){ return this.count > 5 } }, methods: { reverseMessage() { this.message = this.message.split(" ").reverse().join(" "); }, }, }); </script> </body>también tenga en cuenta que la propiedad de datos debe ser una función que devuelva el valor predeterminado, si especifica un objeto, cada instancia de su objeto vue estará vinculada al mismo espacio de memoria, por lo que entrará en conflicto entre sí
Intente usar la propiedad computada para obtener el valor de tiempo de ejecución de blockCount .
Demostración de trabajo:
new Vue({ el: '#app', data: { message: 'Hello Vue ! Just a test', count: '', blockCount: false }, computed: { getblockCount() { this.blockCount = this.count > 5 return this.blockCount; } }, methods: { reverseMessage: function () { this.message = this.message.split(' ').reverse().join(' ') } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="count++" :disabled="getblockCount">increment</button> <button @click="count--">decrement</button> <p>The count is {{ count }}</p> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> <p> <span v-if="count >= 5">You click on the counter enough ! STOP IT !</span></p> </div>