WoJ's questions

Usei o Vue por anos para meu desenvolvimento frontend (amador) e decidi experimentar o Nuxt .

Depois de passar pelo tutorial, pensei que tinha uma ideia geral e criei um projeto simples onde:

• Eu teria uma entrada na página que envia um número para o backend,
• que por sua vez responde com um número incrementado
• que é exibido simultaneamente na página principal.

Para isso criei um novo projeto no qual escrevi alguns arquivos:

server/api/addOne.ts

export default defineEventHandler((event) => {
    const oldNumber = (getRouterParam(event, 'number') || 0) as number
    return {
        oldNumber: oldNumber,
        newNumber: oldNumber + 1,
    }
})

app.vue

<template>
  <div>
    <AddOne></AddOne>
  </div>
</template>

components/AddOne.vue

<template>
    <div>
        <input v-model="myNumber" />
        <button @click="sendToServer">send</button>
        <div> -{{ numberFromServer }}- </div>
    </div>
</template>

<script lang="ts">
const myNumber = ref(0)
const numberFromServer = ref(0)
const sendToServer = async (number: number) => {
    console.log('clicked')
    const { data, pending, error, refresh } = await useFetch('/api/addOne', {
        method: 'post',
        body: {
            number: myNumber.value
        }
    })
    numberFromServer.value = data.newNumber
    myNumber.value = -1
    console.log(`number from server: ${numberFromServer.value}`)
}
</script>

O aplicativo cria e exibe o que é esperado:

O aplicativo não funciona (inserir um número e pressionar sendnão faz nada) e recebo os seguintes avisos:

 WARN  [Vue warn]: Property "myNumber" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Property "numberFromServer" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>

Não entendo de onde eles vêm - myNumbere numberFromServersão definidos no componente. Eu já estava surpreso que o VSCode não os estava sugerindo quando eu os estava digitando, mas pensei que era uma questão de ter o plugin certo, talvez.

Acho que estou fazendo algo fundamentalmente errado, por isso minha pergunta sobre onde as variáveis ​​devem ser definidas no Nuxt, em vez de onde elas estão no Vue.

Tenho um caso de uso muito específico em que preciso acionar uma computed()reavaliação. Pelo que eu sei, a recomputação é acionada automaticamente quando o estado de uma variável reativa usada internamente muda.

Minha pergunta: este é o único caso?

Considere os seguintes trechos de código onde a data atual (no momento da computação) é retornada. O valor é definido uma vez e não muda. Preciso que o valor seja reavaliado regularmente.

Os exemplos a seguir, onde uma rotina cíclica está sendo executada internamente computed() , não alteram o valor calculado:

• uma função vazia é reavaliada

<script setup lang="ts">
import { computed } from 'vue'

const counter = computed(() => {
  setInterval(() => {}, 1000)
  return new Date()
})
</script>

<template>
  <h1>{{counter}}</h1>
</template>

• uma variável padrão é recalculada

<script setup lang="ts">
import { computed } from 'vue'

const counter = computed(() => {
  let u = 0
  setInterval(() => {u++; console.log(u)}, 1000)
  return new Date()
})
</script>

<template>
  <h1>{{counter}}</h1>
</template>

• uma variável reativa é recalculada

<script setup lang="ts">
import { computed, ref } from 'vue'

const counter = computed(() => {
  const u = ref(0)
  setInterval(() => {u.value++}, 1000)
  return new Date()
})
</script>

<template>
  <h1>{{counter}}</h1>
</template>

Quando uma variável reativa é alterada fora da função, o recálculo acontece:

<script setup lang="ts">
import { computed, ref } from 'vue'

const u = ref(0)
const counter = computed(() => {
  u.value;
  return new Date()
})
setInterval(() => {u.value++; console.log(u.value)}, 1000)
</script>

<template>
  <h1>{{counter}}</h1>
</template>

Minha pergunta (mais precisamente): existe uma maneira de executar setInterval()a função computada()? Ou em outras palavras: o que exatamente desencadeia uma recomputação?

Nota: eu sei que este é um caso estranho e que eu poderia ter uma variável reativa recalculada dentro de a setInterval()com base em alguma função. Além de ser mais fácil fazer dessa forma, é uma oportunidade para aprender detalhes sobre o ciclo de reatividade.

Eu tenho um aplicativo Vite/Vue estilizado com Tailwind CSS. Não consigo entender por que o conteúdo de vários gerados automaticamente <div>é agrupado em vez de estar em uma linha.

Tentei reproduzir isso do zero, mas tudo o que tentei se comportou conforme o esperado.

Finalmente copiei o HTML gerado e o problema foi reproduzido. O código está abaixo, também disponível no Tailwind Play .

<div class="flex flex-row items-start gap-5">
  <!--v-if-->
  <div data-v-c5bff582="" class="">
    <!-- important events within 8 days -->
    <div data-v-c5bff582="" class="flex flex-auto flex-row gap-3">
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test later 1</div>
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test 2 later</div>
    </div>
  </div>
  <button class="self-end rounded-md bg-slate-500 px-5 py-2 text-4xl text-white">dump store</button>
</div>

Meu problema é com "teste mais tarde 1" e "teste 2 mais tarde". Por que eles não estão em uma linha, mas agrupados em <div>?

Eu tentei todos os tipos de combinações de classes (e para ser franco, um pouco do que eu pudesse pensar enquanto lia os documentos CSS do Tailwind), mas sem sucesso (embora eu tenha aprendido um pouco de CSS do Tailwind)