Estaba buscando en todo Internet, pero eso no me ayudó a resolver el problema. Con este código a continuación, encuentro 'Error de referencia no detectado: VueSelect no está definido' ¿Qué problema tiene el código?
var productForm = Vue.createApp ({ data: function() { return { product: { sku: 0, name: 'asdf', price: 0 } } } }) productForm.component('custom-form', { props: ['value', 'options'], template: ` <label>SKU<input type="text" :value=this.sku></label> <label>Name<input type="text" :value=this.name></label> <label>Price<input type="text" :value=this.price></label> <vue-select :options="options" label="option" ></vue-select> ` , data: function() { return { sku: 0, name: 'asdf', price: 0, options: [ { option: "Size" }, { option: "Weight" }, { option: "Dimensions" } ] } } }) const vm = productForm.mount('#product_form') vm.component('vue-select', VueSelect )De todos modos, logré hacer lo siguiente con éxito sin VueSelect:
var productForm = Vue.createApp ({}) productForm.component('custom-form', { template: ` <label>SKU<input type="text" v-model="this.product.sku"></label> <label>Name<input type="text" v-model="this.product.name"></label> <label>Price<input type="text" v-model="this.product.price"></label> <label>Attributes<select v-model="selected"> <option v-for="item in options" >{{item}} </option> </select></label> ` , data: function() { return { product: { sku: 0, name: 'asdf', price: 0 }, options: ['Size', 'Weight', 'Dimensions'], selected: 'Size' } } }) productForm.mount('#product_form')