quilkin's questions

A documentação do Vue3 usa CSS para efetuar transições, mas eu queria experimentar a API de animações da Web (relativamente nova) - em parte porque tenho problemas para usar variáveis ​​em CSS.

O seguinte código funciona:

<script setup>
import { ref } from 'vue'
import comp from './comp.vue'

function moveCircle() {
  let elem = document.getElementById("circle");
  if (elem) {
    elem.animate(
      [
        { transform: "translateX(0px)"},
        { transform: "translateX(320px)"}
      ], 500
    )
  }
}
</script>

<template>
<div>
  <comp id="circle"></comp>
  <button @click="moveCircle()">Move it</button>
</div>
</template>

(comp.)

<script setup></script>

<template>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</template>

Parque Vue aqui

... mas eu queria me livrar do que é um tanto complicado getElementByIde, em vez disso, usar refs do modelo Vue :

<script setup>
import { ref } from 'vue'
import comp from './comp.vue'

const circle = ref(null);

function moveCircle() {

  let elem = circle.value;
  if (elem) {
    elem.animate(
      [
        { transform: "translateX(0px)"},
        { transform: "translateX(320px)"}
      ], 500
    )
  }
}
</script>

<template>
<div>
  <comp ref="circle"></comp>
  <button @click="moveCircle()">Move it</button>
</div>
</template>

mas isso não faz a animação ( playground revisado ). A certa altura, ocorreu um erro animate() is not a function, mas agora não há erro - simplesmente nada acontece. Qual é a maneira correta de fazer isso?

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 .

Depois de encontrar esse método para usar um enum para definir um objeto, eu queria usar esse objeto no Vue.

export enum Options {
  randSize = 'randomSized',
  timer = 'showTimer',
  randAngle = 'randomAngle',
  colours = 'multiColour',
  cardSize = 'cardSize',
  numCards = 'numCards'
}

(componente pai):

import { Options} from './util'
let options : {[key in Options]: number | boolean} = {
  [Options.randSize]: true,
  [Options.timer] : false,
  [Options.randAngle] : true,
  [Options.colours] : true,
  [Options.cardSize] : 8,
  [Options.numCards] : 20

}

Eu também tenho (graças a este post ) uma maneira de alterar os valores das opções:

function changeOption( option: string, value: number | boolean) {
  options = {...options,[option]:value}
}

mas quando quero usar essas opções como propriedade do componente, o enum não é reconhecido:

(modelo pai):

      <game-options 
        :options = "options"
        @done-setup = "gameStarted=true"
        @change-options="changeOption"
      >
      </game-options>

(componente filho):

import { ref, onMounted } from 'vue'
import { Options} from '../util'

const props = defineProps<{
  options: {[key in Options]: number | boolean}
}>()

onMounted(() =>{
  console.log(props.options);
  let foo = props.options.randSize;
})

dá um erroProperty 'randSize' does not exist on type '{ randomSized: number | boolean; showTimer: number | boolean; randomAngle: number | boolean; multiColour: number | boolean; cardSize: number | boolean; numCards: number | boolean; }'.ts(2339)

Como corrigir isso?

Eu tenho um cliente funcional escrito em TypeScript e um servidor web legado escrito em c# . Estou tentando converter o código c# em nós.js/express.

A função de busca do cliente:

export async function myFetch(url : String, data : Object | null)  {

    const bodyData = JSON.stringify(data);
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: bodyData
    }
    const fullUrl = serviceBase() + url;
    let res;

    try {
      if (data==null)
        res = await fetch(fullUrl);
      else
        res = await fetch(fullUrl, options);

      if (!res.ok) {
        throw new Error(`HTTP error: ${res.status}`);
      }
      return await res.json();
    }

   catch (error : any) {
      AlertError('Web error',error)
    }
  
  }

e esta é a interface (em C#) para um dos endpoints do servidor:

[OperationContract]
[WebInvoke(Method = "POST", UriTemplate = "/GetRidesForDate", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
[ServiceKnownType(typeof(List<Ride>))]
IEnumerable<Ride> GetRidesForDate(int date);

Usando isso, GetRidesForDateretorna resultados corretos.

Na tentativa de nó/expresso eu tenho:

const app = express ();
const port = process.env.PORT || 3000;
app.use(express.json());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.listen(port, () => {
    console.log("Server Listening on PORT:", port);
  });
app.get("/GetRidesForDate/:date", (request: any, response: { json: (arg0: any[]) => void; }) =>
  {
    console.log('getRidesForDate '  + request.params.date);
    getRidesForDate(request,response);
  })

mas se eu ligar para o cliente buscar com

rides.value = await myFetch("GetRidesForDate",18800);

o código do servidor nunca chega console.log, em vez disso, recebo um erro:

SyntaxError: Unexpected token '1', "#" is not valid JSON
at JSON.parse (<anonymous>)

Este 1é o primeiro dígito dos dados de busca. O cliente apresenta um erro 400 (solicitação incorreta).

Se eu usar um navegador e for para http://localhost:3000/GetRidesForDate/18800o servidor node/express responde corretamente.

Quais devem ser os parâmetros app.get()para fazer isso funcionar com meu fetchcomando?

Estou com o mesmo problema descrito aqui , ou seja, minha compilação atualmente inclui meio megabyte de ícones não utilizados. A solução dada nessa resposta não funciona para mim (os ícones não aparecem), talvez porque esteja usando uma versão mais recente do Vuetify. Acompanhei a instalação @mdi/jse uso dos ícones fornecidos nessa resposta, que também diz

Você simplesmente passa a string do ícone para um elemento de caminho SVG ou, neste caso, pode passá-la diretamente para v-icon se especificar a fonte do ícone na configuração do Vuetify: iconfont: 'mdiSvg'.

Se eu tentar isso na minha configuração, recebo um erro:

'iconfont' não existe no tipo

const vuetify = createVuetify({
    icons: {
        iconfont: 'mdiSvg',
        defaultSet: "mdi",
        aliases,
        sets: {
          mdi,
          fa,
        },
      },
      components: {
        VDatePicker,
      },
    directives,
  })

Estou usando os ícones abaixo. Se eu incluir o conjunto MDI completo, como tenho feito, ele mdi-bikeaparece, mas mdiMapnão

  import { mdiMap } from '@mdi/js'
  ....
  ....
  <v-tab :value=Tabs.routes><v-icon :icon="mdiMap"></v-icon>All routes</v-tab>
  <v-tab :value=Tabs.newRide><v-icon>mdi-bike</v-icon>New Ride</v-tab>

Estou usando o Vuetify v-date-pickerem um projeto e o código está funcionando, mas tenho um erro de TypeScript ao usar v-model:

<v-date-picker title="Start Date" width = "200" v-model="workingDate" @click:save="newDate"/>

O erro é:

Type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; (locales?: LocalesArgument, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; [Symbol...' is not assignable to type 'any[]'.ts(2322)
index.d.mts(2757, 13): The expected type comes from property 'modelValue' which is declared here on type '{ header?: string | undefined; style?: StyleValue | undefined; title?: string | undefined; inputMode?: "calendar" | "keyboard" | undefined; multiple?: boolean | undefined; ... 57 more ...; "onClick:save"?: (() => any) | undefined; } & Record<...>'

Carreguei uma demonstração funcional, que também mostra o erro TS, no playgound do Vuetify .

Há uma solução possível aqui , mas que precisa de acesso ao código do componente que não tenho v-date-picker.