Vue.js

How to insert named slots into parent components

由 耗尽温柔 提交于 2021-02-11 09:17:53
问题 Named slots are very useful in overriding sections of a component, like so: <warning> <template slot="text">Custom warning text!</template> </warning> How does one use named slots to override sections of warning component within a parent component, one level up? <component-with-a-warning> <template slot="text">Custom warning text!</template> </component-with-a-warning> I illustrated this problem better in a JS Fiddle. https://jsfiddle.net/madhazelnut/pdzoeqj0/ 回答1: If I understand your

How to insert named slots into parent components

由 二次信任 提交于 2021-02-11 09:16:36
问题 Named slots are very useful in overriding sections of a component, like so: <warning> <template slot="text">Custom warning text!</template> </warning> How does one use named slots to override sections of warning component within a parent component, one level up? <component-with-a-warning> <template slot="text">Custom warning text!</template> </component-with-a-warning> I illustrated this problem better in a JS Fiddle. https://jsfiddle.net/madhazelnut/pdzoeqj0/ 回答1: If I understand your

How do I stop displaying the inline validation error message in Vuetify?

由 女生的网名这么多〃 提交于 2021-02-11 08:28:05
问题 I need to display all form validation errors in one alert at the top of a form when the user clicks submits (not inline with the input elements). How do I suppress the inline validation error message if I am using Vuetify and Vee-Validation. (I will display errors in an alert using the $errors array). There is nothing about this in the documentation. I tried not passing anything in error-messages, but then I lose the red outline on the invalid field. My field is configured like this <v-text

Access data from another Component

由 谁说我不能喝 提交于 2021-02-11 08:27:49
问题 now i have 2 Components 1 - is just a drop down list v-select <v-row align="center" > <v-col class="d-flex" cols="12" sm="6" v-if="Compounds" > <v-select :items="Compounds" v-model="selectedItems" label="Select" item-value="id" item-text="name" v-on:change="selectedCompound"> </v-select> {{ selectedItems }} </v-col> </v-row> with method methods: { selectedCompound(h2o) { console.log(h2o); console.log("This is from Selected Compound"); }, and i call it in another page <div> <SelectCompound><

How to customize controls and indicators in BootstrapVue's Carousel component?

由 不问归期 提交于 2021-02-11 06:55:30
问题 The code looks as following: <template> <div> <b-carousel id="carousel-upper" v-model="slide" :interval="3000" fade controls indicators @sliding-start="onSlideStart" @sliding-end="onSlideEnd" > <b-carousel-slide img-src="https://licota.ru/system/sliders/attachments/55ba/10cf/7372/763c/8600/0002/full/banner-2.jpg?1438257358" ></b-carousel-slide> <b-carousel-slide img-src="https://licota.ru/system/sliders/attachments/55ba/10cf/7372/763c/8600/0003/full/banner-3.jpg?1438257359" ></b-carousel

How to close outer v-tooltip on inner v-tooltip hover

由 非 Y 不嫁゛ 提交于 2021-02-11 06:46:14
问题 I have two tooltips, one is on an outer element, the other on the inner element like this: How do I remove the outer tooltip when the inner tooltip is showing? Here's a Fiddle The code is pretty standard, but keep in mind, sometimes v-tooltip places tooltips like a modal - on the body level, so the tooltips might not actually be nested. <div id="app"> <div v-tooltip="'Outer Tooltip'"> Outer Area <div v-tooltip="'Inner Tooltip'"> okokok </div> </div> </div> Here's what I've tried: On the Outer

理解前端数据双向绑定原理——Object.defineProperty()

由 筅森魡賤 提交于 2021-02-11 06:45:50
Object.defineProperty与vue之间的关系 vue 是通过数据劫持的方式来做数据绑定的，最核心的方法是通过 Object.defineProperty() 方法来实现对属性的劫持，达到能监听到数据的变动。要实现数据的双向绑定。 理解前端数据双向绑定原理:Object.defineProperty() Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性，最终返回这个对象。 Object.defineProperty 需要三个参数（object , propName , descriptor） 1 object 对象 => 被定义或修改属性的对象； 2 propName 属性名 => 要加的属性的名字 【类型：String】 3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】 返回值 函数将返回传递给他的obj对象本身。 描述符（descriptor）说明 该方法允许开发者精确的对对象属性的定义和修改。通过正常赋值进行属性添加而构建的属性会被枚举器方法（如for…in循环或Object.keys方法）获取，从而导致属性值被外部方法改变或删除。而Object.defineProperty()可以避免以上描述的情况，默认的，通过Object.defineProperty

Retrieve data from an API and pass them in a Vuetify table

由 自闭症网瘾萝莉.ら 提交于 2021-02-11 06:11:32
问题 I was assigned to do this project as part of my application for a Junior Developer position. I have never worked on Vue.js and they assigned me with this project asking to retrieve JSON data from an endpoint and projecting them in a vuetify table. My main issue is with the vuetify table i can not understand the difference with the normal html table. Moreover i can not understand whether i have to do a small app using html and js files or to use node.js also and work on it. However i did find

Vue Router how to scroll to same hash consecutively

由 此生再无相见时 提交于 2021-02-11 05:59:34
问题 I'm currently working on a site based on Vue and using Vue Router for routing. My way to handle scroll behavior to anchor links is the following: const router = new VueRouter({ routes, scrollBehavior (to) { if (to.hash) { return { selector: to.hash, offset: { x: 0, y: 140 } } } return { x: 0, y: 0 } } }) And my links are built in the following way: <router-link class="insurance-link d-block" to="#hogar"> <img class="insurance-logo img-fluid" src="@/assets/home-icon.svg"> Hogar </router-link>

写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

由 独自空忆成欢 提交于 2021-02-11 05:58:18
写一个vue表单验证插件(vue-validate-easy) 需求 目标：简单易用可扩展 如何简单 开发者要做的 写了一个表单，指定一个name，指定其验证规则。 调用提交表单方法，可以获取验证成功后的数据。 调用重置表单方法重置表单 自定义验证方法 程序应该做的 获取表单元素，绑定事件 有输入时，获取表单值，使用开发者指定的规则进行验证，若验证错误给予错误提示。 实现方法 获取原生表单元素，vue指令获取到的是包裹原生表单元素的外层元素，这里我使用data-type属性来获取原生表单元素 验证规则，验证参数，自定义错误提示语 由 vue的指令值来获取 提交时，我们需要一个表单标识，这里我使用了data-scope属性来对表单进行分组 重置，通过data-scope重置整个表单 常用方法 懒验证，通过.lazy指令修饰符 远程验证, 通过async await 延时验证, .deay指令修饰符，和data-delay属性 表单主动验证，单字段主动验证 单字段表单重置 可扩展 错误消息自定义 验证方法自定义 错误提示处理自定义 自定义表单元素（不借助原生元素） 完成后的使用代码 // 你只要指定 data-scope data-name data-type v-validate-easy 这四个属性的值，然后通过调用this.V.$submit(scope)就可以进行提交表单了
订阅 Vue.js