Coder Social home page Coder Social logo

Comments (5)

dwightjack avatar dwightjack commented on June 3, 2024 1

@davidbeijinho I guess that's a bug. I will work on a fix in the next few days.

from vue-types.

davidbeijinho avatar davidbeijinho commented on June 3, 2024

the same result for the vue3

import { defineComponent, createApp, h, computed, ref } from 'vue3'
import VueTypes from '../../../src'

interface ModelItem {
  id: string
  pet: 'dog' | 'cat'
  isNew: boolean
  modelname: any
  modelprop: any
}

function minLength(value: any) {
  return typeof value === 'string' && value.length >= 6
}

const Model = defineComponent({
  template: '<li>{{ model.id }} {{ isNew }} (pet: {{ model.pet }})</li>',
  props: {
    model: VueTypes.shape<ModelItem>({
      id: VueTypes.string.isRequired,
      pet: VueTypes.oneOf(['dog', 'cat'] as const).isRequired,
      isNew: VueTypes.bool,
      modelname: VueTypes.custom(minLength).isRequired,
      modelprop: VueTypes.custom<string>(minLength).isRequired,
    }).isRequired,
    username: VueTypes.custom(minLength).isRequired,
    theprop: VueTypes.custom<string>(minLength).isRequired,
  },
  setup(props) {
    const isNew = computed(() => (props.model.isNew ? '- new' : ''))
    return { isNew }
  },
})

const App = defineComponent({
  template: `
    <section>
      <h1>A list of models</h1>
      <button type="button" @click="addPet('parrot')">Add parrot (invalid, logs to console)</button>
      <button type="button" @click="addPet('dog')">Add dog</button>
      <ul><Model v-for="model in models" :model="model" :key="model.id" :username="'aaaaaaaa'" :theprop="'aaaaaaaa'" /></ul>
    </section>
  `,
  setup() {
    const models = ref<ModelItem[]>([])

    function addPet(pet: ModelItem['pet']) {
      models.value.forEach((model) => {
        model.isNew = false
      })
      models.value.push({
        id: 'model-' + models.value.length,
        pet,
        isNew: true,
        modelname: false,
        modelprop: {},
      })
    }

    return { models, addPet }
  },
  components: {
    Model,
  },
})

createApp({ render: () => h(App) }).mount('#app')

from vue-types.

dwightjack avatar dwightjack commented on June 3, 2024

@davidbeijinho I've pushed a fix in #177 and published it as [email protected].

Could you check if it fixed your issue?

from vue-types.

dwightjack avatar dwightjack commented on June 3, 2024

@davidbeijinho sorry to ping you again. Can you confirm that the issue has been solved?

from vue-types.

dwightjack avatar dwightjack commented on June 3, 2024

Released in the stable channel as v4.1.1.

from vue-types.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.