vuejs2 相关问题

将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。

我是 vue.js 的新手。我写这个是为了编辑数据我是 vue.js 新手。我写这个是为了编辑数据 <i class="mdi mdi-pencil" @click.prevent="$bvModal.show(`Rel${holiday.id}`)" ></i> <b-modal :id="`Rel${holiday.id}`" ref="modal" title="Update holiday" centered hide-footer> <EditModal cardTitle="Update holiday" description="Update holiday" :holidayObject="holiday"/> </b-modal> 我在文件 edit-modal.vue 中写入模态，并为表单编写此内容： <form class="needs-validation" @submit.prevent="UpdateFormSubmit(holidayObject.id)"> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label for="validationCustom01">Comments</label> <b-form-input id="validationCustom01" type="text" class="form-control" placeholder="Comments" v-model="holidayComments" :value="holidayObject.comments" /> </div> <div class="mb-3"> <label class="mt-3">Holiday type*</label> <multiselect required id="validationCustom02" v-model="holidayTypeValue" :options="holidayTypesOptions" placeholder="choose type" selectLabel="type choised" selectedLabel="choosed" deselectLabel="by choice" :value="holidayObject.holiday_type_name" ></multiselect> </div> </div> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <div class="mb-3"> <label class="mt-3">From*</label> <b-form-input id="validationCustom03" v-model="startDate" type="date" placeholder="DD-MM-YYYY" format="DD-MM-YYYY" autocomplete="off" :value="holidayObject.holidays_start_date" ></b-form-input> </div> </div> <div class="col-md-12"> <div class="mb-3"> <label class="mt-3">To*</label> <b-form-input id="validationCustom04" v-model="endDate" type="date" placeholder="DD-MM-YYYY" format="DD-MM-YYYY" autocomplete="off" :value="holidayObject.holidays_end_date" ></b-form-input> </div> </div> </div> </div> </div> <button class="btn btn-primary" type="submit"> Submit </button> </form> 我写了这个ins脚本 import session from "../../../../api/session"; import Multiselect from "vue-multiselect"; import { eventCreate } from "../../../../eventspy"; export default { components: { Multiselect, }, props: { cardTitle: String, description: String, holidayObject: { type: Object, required: true, } }, data() { return { startDate: this.holidayObject.holidays_start_date, endDate: this.holidayObject.holidays_end_date, holidayTypes: [], holidayTypeValue: this.holidayObject.holiday_type_name, holidayComments: this.holidayObject.comments, alertShow: false, alertVariant: "", alertMsg: "" }; }, mounted() { this.fetchHolidayTypes(); }, computed: { holidayTypesOptions() { return this.holidayTypes.map((e) => e.title); }, }, methods: { fetchHolidayTypes() { session.get("api/holidays/holiday-type-list/").then((resp) => { this.holidayTypes = resp.data; }); }, async UpdateFormSubmit(holidayID) { if (!this.holidayTypeValue) { alert('Input the holiday type.'); return; } if (!this.startDate || !this.endDate) { alert('Input the dates'); return; } if (this.startDate > this.endDate) { alert('end date should be after start date'); return; } // this.$refs["modal"][0].hide(); const holidayTypesId = this.holidayTypes .filter((e) => e.title === this.holidayTypeValue) .map((item) => item.id)[0]; console.log("holiday type id",holidayTypesId) await session .put(`api/person/holiday/${holidayID}/actions/`, { holidays_start_date: this.startDate, holidays_end_date: this.endDate, comments: this.holidayComments, person: this.$route.params.id, holiday_type_name: this.holidayTypeValue }) .then(() => { this.alertShow = !this.alertShow; this.alertVariant = 'success'; this.alertMsg = 'data updated'; setTimeout(() => { this.$bvModal.hide(`Rel${holidayID}`); }, 1500); eventCreate(`comments: ${this.holidayObject.comments}, holiday_type_name: ${this.holidayObject.holiday_type_name}, holiday_start_date: ${this.holidayObject.holidays_start_date}, holiday_end_date: ${this.holidayObject.holidays_end_date}, ------------------------------------------ comments: ${this.holidayComments}, holiday_type_name: ${this.holidayTypeValue}, holiday_start_date: ${this.startDate}, holiday_end_date: ${this.endDate}`,2); }) .catch((e) => { this.alertShow = !this.alertShow; this.alertVariant = 'danger'; this.alertMsg = e.response.data; }); }, } } 我的问题是，当我更改假期类型时，假期类型不会更改，而当我更改日期时，日期仅在刷新页面后才更改。这有什么问题吗？我设法在 editModal 中使用此更新数据而无需刷新页面 setTimeout(() => { this.$bvModal.hide(`Rel${holidayID}`); this.$emit("holidayUpdated"); }, 1500); 还有这个 holidayUpdated(holidayID){ this.$bvModal.hide(`Rel${holidayID}`); this.fetchPersonHolidays(); } 但我也有多选更新的问题

vue.js vuejs2

回答 1 投票 0

如何将 ref 传递给 props？

我有一个应该传递给 props 的 ref，但是当我这样做时，ref 在子组件中未定义父级.vue 目标我有一个应该传递给 props 的 ref ，但是当我这样做时 ref 在子组件中未定义 parent.vue <div ref="target">target</div> <cmp :target="$refs.target" /> cmp.vue mounted() { console.log("target:", this.target); // undefined } 示例：codesanbox 热模块更换后目标正确我不确定是否将其作为道具传递，但您始终可以在子组件中执行此操作。 console.log(this.$parent.$refs.target); 更多信息请参见文档。这是另一种做事方式（确实更干净）。 App.vue <template> <div id="app"> <div ref="target">target</div> <cmp :getScreenRef="() => $refs['target']" /> </div> </template> <script> import Cmp from "./components/cmp.vue"; export default { name: "App", components: { Cmp, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> cmp.vue <template> <div> qwe <br /> <button @click="logTarget">click me</button> </div> </template> <script> export default { inheritAttrs: true, data() { return { screenRef: "", }; }, props: { getScreenRef: { type: Function, default: () => ({}), }, }, methods: { logTarget() { console.log("target:", this.screenRef); }, }, mounted() { this.screenRef = this.getScreenRef(); this.$nextTick(function () { console.log("here?", this.screenRef); }); }, }; </script> 归功于这个答案。

vue.js vuejs2

回答 1 投票 0

Vuetify 2 v 菜单左侧 | （Vuetivy 3 替补）

我正在尝试制作一个 Vue&Vuetify 应用程序，并且我一直在寻找一种方法使我的菜单下拉菜单位于左侧标题下拉中心居中对齐在 vuetify 3.0 中我们可以使用“位置”，但是这个

javascript html css vuejs2 vuetify.js

回答 1 投票 0

正确使用 click:outside 和 vuetify 对话框

我有一个 v 对话框，可以在需要时弹出日期选择器。为了展示它，我将一个值与 v-model 绑定。我使用 click:outside 事件来触发应该关闭它的函数，一旦我...

javascript vuejs2 vuetify.js

回答 2 投票 0

有没有办法将组件（同时设置其属性）v-bind 作为另一个组件的属性，如下所示

这就是我想要实现的目标。我想提供 MyParentComponent 一个子组件作为项目...