我正在使用Laravel + Vue.js创建一个SPA。在SPA中，我正在创建一个表单，用户可以在其中编写降价内容并单击按钮提交。我想显示一个错误的烤面包机在屏幕的右下角，如果用户没有输入任何内容，当他们点击发送按钮。我正在使用bootstrap vue toast来实现错误烤面包器。
然而，当我点击发送按钮时，错误的烤面包机只会闪烁1秒，然后立即消失。此外，错误烤面包机在左上角闪烁，这与我在下面的代码中所写的不同。
包含调用toast方法的mixin:
ErrorMessage.vue
# ErrorMessage.vue
<script>
export default {
methods: {
showErrorMessage (msg) {
this.$bvToast.toast(msg, {
title: ["Error!"],
variant: "danger",
toaster: "b-toaster-bottom-right"
});
}
}
};
</script>
我在这个值组件ArticleForm.vue中导入了上面的mixin。
ArticleForm.vue
<template>
<form @submit.prevent="passArticleData">
<div id="editor-markdown-editor">
<div id="editor-markdown">
<div
id="editor-markdown-tag-input"
@click="toggleTagModal"
>
<ul v-if="insertedTags.length">
<li v-for="tag in insertedTags"
:key="tag.id"
class="tag"
>
{{ tag.name }}
</li>
</ul>
<span v-else>タグを入力してください</span>
</div>
<div id="editor-markdown-textarea">
<textarea :value="input" @input="update" ref="textarea"></textarea>
<div id="drop-here"></div>
</div>
</div>
<div id="editor-preview">
<article v-html="compiledMarkdown(input)" class="markdown-render" ref="articleHtml"></article>
</div>
</div>
</form>
</template>
<script>
import _ from "lodash";
import ErrorMessage from "./mixins/ErrorMessage";
import { markdownTable } from "markdown-table";
export default {
props: {
article: Object,
tags: Array
},
mixins: [ErrorMessage],
data () {
return {
articleToPass: {
title: "",
body: "",
isDraft: true
},
input: "",
tagsToPass: [],
insertedTags: [],
tagModalOpen: false
};
},
methods: {
update: _.debounce(function (e) {
this.input = e.target.value;
}, 300),
passArticleData (e) {
// Get title from input
try {
this.articleToPass.title = this.$refs.articleHtml.getElementsByTagName("h1").item(0).innerHTML;
} catch (e) {
this.showErrorMessage(["Body md can't be blank"]);
}
// Remove first line(title) from users' input
this.articleToPass.body = this.input.substring(this.input.indexOf("n") + 1);
// tag id of written article
const tagIds = this.insertedTags.map(obj => obj.id);
this.tagsToPass = tagIds;
this.$emit("handle-new-data", this.articleToPass, this.tagsToPass);
}
}
上述值组件的父组件:
ArticleCreate.vue
<template>
<div id="content-area">
<header-component></header-component>
<main id="editor-area">
<article-form :article="article" :tags="tags" @handle-new-data="postArticle"></article-form>
</main>
</div>
</template>
<script>
import HeaderComponent from "./Header.vue";
import ArticleForm from "./ArticleForm.vue";
export default {
data () {
return {
article: {
title: "",
body: "",
is_draft: true
},
tags: []
};
},
components: {
HeaderComponent,
ArticleForm
},
methods: {
postArticle (articleObj, tagsData) {
const data = { article: articleObj, tags: tagsData };
axios.post("/api/articles", data)
.then((res) => {
this.$router.push({ name: "article.show", params: { article: res.data } });
});
}
}
};
</script>
我试着:
- 修改
this.$bvToast为this.$root.$bvToast(基于此问题) - 将我的引导版本从4.6.0降级到4.5.3(基于这个问题)
我花了很多时间试图解决这个问题，但失败了。有人知道为什么会发生这种情况吗?我该怎么做?如果你需要任何额外的信息，请告诉我。提前谢谢你。
这通常是引导版本不匹配的标志。
我实际上能够重现这个问题，并通过回滚到bootstrap v4来修复它
与bootstrap 5断开
https://codesandbox.io/s/bootstrap-vue-toasting-broken-with-bootstrap-5-bqe2c
使用bootstrap 4
https://codesandbox.io/s/bootstrap-vue-toasting-working-with-bootstrap-4-jk2jl
我已经找出问题所在了。问题是bootstrap- value css在我的项目中没有正确加载。只需添加import "bootstrap-vue/dist/bootstrap-vue.css";到app.js，它现在工作得很好。谢谢你