Início / coding / Perguntas / 77842312
Accepted
quilkin
Asked: 2024-01-19 04:46:04 +0800 CST

Como usar defineModel (no Vue 3.4) para usos diferentes de entradas

  • 772

Todos os exemplos dados defineModel nos documentos do Vue estão relacionados ao uso de entradas de dados. Eu queria saber se essa construção também poderia ser usada em outro lugar, evitando assim o método um tanto complicado de adereços/emissão de troca de dados entre pai e filho:

(aplicativo.vue):

<script setup lang="ts">
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
const title = ref('v-model argument example with array')
const array = ref([1,2,3,4,5]);
</script>

<template>
  <h1>{{ title }}</h1>
  <MyComponent  v-model:array = "array"  />
  <h2>Parent array: {{array}}</h2>
</template>

(meuComponent.vue):

<script setup lang="ts">
const array  = defineModel('array')

function ShortenArray() {
  array.value = array.value.slice(1);
}
</script>

<template>
  <button @click="ShortenArray">Shorten Array</button>
  <p></p>
  child array: {{ array }}
</template>

Este código é executado conforme o esperado, mas há um erro de digitação Property 'slice' does not exist on type 'unknown'fornecido para array.slice(), que não consigo resolver.

Parque Vue aqui .

typescript

1 respostas

  1. Best Answer

    Você precisa adicionar o tipo ao seu defineModel, neste caso pode ser um array de números:

    <script setup lang="ts">
const array  = defineModel<Array<number>>('array')

function ShortenArray() {
  array.value = array.value.slice(1);
}
</script>
    • 1

relate perguntas