我有以下两个vue组件：
firstcomponent.vue
<template>
<div class="profile-setup" v-show="profile">
<div class="md-layout md-gutter">
<div class="md-layout-item md-size-100">
<div class="md-title">Setup your profile</div>
</div>
<div class="md-layout-item md-size-50">
<md-field>
<label>Names</label>
<md-input v-model="real"></md-input>
<span class="md-helper-text">Your real names</span>
</md-field>
</div>
<div class="md-layout-item md-size-50">
<md-field>
<label>Display Name</label>
<md-input v-model="display"></md-input>
<span class="md-helper-text">Your display name</span>
</md-field>
</div>
<div class="md-layout-item md-size-50">
<md-field>
<label>Account Name</label>
<md-input v-model="account"></md-input>
<span class="md-helper-text">Your account name</span>
</md-field>
</div>
<div class="md-layout-item md-size-50">
<md-field>
<label>Phone number</label>
<span class="md-prefix">+250</span>
<md-input v-model="number" type="number"></md-input>
<span class="md-helper-text">Your phone number</span>
</md-field>
</div>
<div>
<div>
<md-dialog-confirm
:md-active.sync="active"
md-title="Account created!"
md-content="Do you want to create <strong>RWPay</strong> account?"
md-confirm-text="Yes"
md-cancel-text="No thanks"
@md-cancel="onCancel"
@md-confirm="onConfirm" />
</div>
</div>
</div>
<md-dialog-actions>
<md-button class="md-dense md-raised md-primary" @click="active = true">Save</md-button>
</md-dialog-actions>
</div>
<script>
export default {
name: 'firstcomponent',
data: () => ({
real: null,
display: null,
account: null,
number: null,
active: false,
value: null,
profile: true
}),
methods: {
onConfirm () {
console.log('second confirmed');
},
onCancel () {
console.log('second canceled');
}
}
}
</script>
secondcomponent.vue
<template>
<div class="secondcomponent">
<md-tabs md-alignment="centered">
<md-tab id="tab-mobile" md-label="Mobile Money" to="/components/tabs/mobile">
<div class="md-layout md-gutter">
<div class="md-layout-item md-size-100">
<md-field>
<label>Phone number</label>
<span class="md-prefix">+250</span>
<md-input v-model="number" type="number"></md-input>
</md-field>
</div>
</div>
</md-tab>
<md-tab id="tab-card" md-label="Debit/Credit Card" to="/components/tabs/card">
<div class="md-layout md-gutter">
<div class="md-layout-item md-size-100">
<md-field>
<label>Card type</label>
<md-select v-model="cardtype" name="cardtype" id="cardtype" md-dense>
<md-option value="visa">Visa</md-option>
<md-option value="mastercard">Mastercard</md-option>
<md-option value="american-express">American Express</md-option>
</md-select>
</md-field>
</div>
<div class="md-layout-item md-size-100">
<md-field>
<label>Card number</label>
<md-input v-model="card" maxlength="16"></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-50">
<md-field>
<label>Expiry date</label>
<md-input v-model="month" maxlength="2"></md-input>/
<md-input v-model="year" maxlength="2"></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-50">
<md-field>
<label>CSC</label>
<md-input v-model="exp" maxlength="3"></md-input>
</md-field>
</div>
</div>
</md-tab>
</md-tabs>
<md-dialog-actions>
<md-button class="md-dense md-raised">Cancel</md-button>
<md-button class="md-dense md-raised md-primary">Save</md-button>
</md-dialog-actions>
</div>
<script>
export default {
name: 'secondcomponent',
data: () => ({
number: null,
cardtype: null,
card: null,
month: null,
year: null
})
}
</script>
因此，我希望当我单击对话框上的“是”按钮时，它会打开secondcomponent.vue，当我单击“否”时，它会转到另一个，我将在以后指定。
我在laravel中使用Vue。感谢您的帮助！
最佳答案
“打开secondcomponent.vue”到底是什么意思
您是说它应该在相同的上下文中显示？还是将其路由到特定路由？
如果只想在相同的上下文中显示它，可以使用dynamic components
在component1数据中定义名称，然后根据调用的模态方法进行切换。
<script>
import SecondComponent from 'secondcomponent.vue'
import ThirdComponent from 'thirdcomponent.vue'
export default {
name: 'firstcomponent',
components: {Secondcomponent, Thirdcomponent },
data: () => ({
real: null,
display: null,
account: null,
number: null,
active: false,
value: null,
profile: true,
showAdditionalInfo: false,
additionalInfo: null
}),
methods: {
onConfirm () {
this.showAdditionalInfo = true
this.additionalInfo = 'secondcomponent'
},
onCancel () {
this.showAdditionalInfo = true
this.additionalInfo = 'thirdcomponent'
}
}
}
</script>将
component标记放置在您想要组件的位置因此，它属于同一范围。
如果要重定向到特定视图，则无需vue-router就会很棘手。
我建议您然后围绕它构建一个包装器，并在cancel和Confirm方法的第一个组件中发出一个事件。在组件上侦听它，然后有条件地渲染它们。 （您也可以在此处利用动态组件。）
<FistComponent @first="handleFirst" @second="handleSecond"/>
<SecondComponent v-if="showSecond" />
<ThirdComponent v-if="showThird" />
关于javascript - 在Vue.Js中的对话框上单击按钮后，从方法中打开Vue组件。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51634174/