Я начинаюсь с VUE и мне не удается понять, как делать, чем с файла, который называется modales.vue, где они мой modale, им удается принести это в мой компонент в части template моего index.js.
Он мог бы делать это буквальным способом с '' но останься очень мало понятным. возможно делать это таким образом, которое я пробую, или он не я не знаю много vue следовательно не, правилен ли он.
Это файл index.js
Vue.component('mi-compo',{
template: `<p>como traigo el archivo modales.vue donde esta el modal que necesito</p>`,
data(){
return{
unidad:'',
};
},
methods:{
close: function () {
this.$emit('close');
this.unidad = '';
this.dialog = false;
}
}
});
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
tab: null,
text1: 'Lorem ipsum dolorconsequat.',
text2:'CREA TU SOLICITUD',
icons: false,
}
},
});
aqui el arvhivo modales.vue
<template>
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">CREAR NUEVA SRM</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">DATOS SRM</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6">
<v-select
v-model="unidad"
:items="['B1', 'B2', 'B3', 'B4']"
label="Unidad*"
required
></v-select>
</v-col>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close()">Close</v-btn>
<v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
Что ты можешь, ты заставляешь меняться приклеиваешь этикетку на template
поэтому:
<script type="text/x-template" id="mi-compo">
// ...
</script>
И ты cГіdigo verГ - в asГ-:
<script type="text/x-template" id="mi-compo">
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">CREAR NUEVA SRM</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">DATOS SRM</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6">
<v-select
v-model="unidad"
:items="['B1', 'B2', 'B3', 'B4']"
label="Unidad*"
required
></v-select>
</v-col>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close()">Close</v-btn>
<v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</script>
<script>
Vue.component('mi-compo',{
template: '#mi-compo',
data(){
return{
unidad:'',
};
},
methods:{
close: function () {
this.$emit('close');
this.unidad = '';
this.dialog = false;
}
}
});
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
tab: null,
text1: 'Lorem ipsum dolorconsequat.',
text2:'CREA TU SOLICITUD',
icons: false,
}
},
});
</script>