我正在尝试将几个字段设置为有条件必填。但我无法让它发挥作用。我已经设置了一个数据字段notRequired: false,并基于此我在字段中使用它以:required="!notRequired"使这些字段成为不需要的,因为在某些情况下我需要根据需要使用这些字段,而在某些情况下我不需要,因为我试图设置那是有条件的。问题是由于添加到字段中的规则,错误消息仍然出现。有没有办法让规则也有条件?
<template>
<v-text-field
label='Agency Name'
v-model='agency.name'
:rules='nameRules'
:required="!notRequired"
required>
</v-text-field>
<v-text-field
label='Agency Code'
:rules='codeRules'
:required="!notRequired"
v-model='agency.code'>
</v-text-field>
<v-text-field
label='Agency location'
:rules='locationRules'
:required="notRequired"
v-model='agency.location'>
</v-text-field>
</template>
<script>
export default {
data: function () {
return {
notRequired: false,
agency: {
name: '',
code: '',
location: '',
}
nameRules: [
value => !!value || 'Please enter name'
],
codeRules: [
value => !!value || 'Please enter code'
],
locationRules: [
value => !!value || 'Please enter location' …Run Code Online (Sandbox Code Playgroud) 我正在开发 vue 应用程序。我在这里面临的问题是,安装的子组件是在创建父子组件之前执行的。
我正在从父组件向子组件发送道具,并且我想在子组件的已安装组件中使用这些道具,但我没有在已安装的组件中获取这些道具,因为它们是在父组件中创建之前执行的。请帮我解决这个问题,以便子组件将 this.userCopy 设置为 this.user ,它将作为 prop 出现。
父组件
<template>
<div>
<Info :user="user" />
</div>
</template>
<script>
import Info from 'views/info';
export default {
components: {
Info
},
data () {
return {
user: {
first_name: '',
last_name: '',
},
errors:[]
}
}
created() {
this.fetchUsers();
},
methods: {
fetchUsers() {
this.$axios.get('/user.json')
.then(response => {
this.user = response.data;
}).catch(error => {
this.errors = error.response.data.error;
});
},
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
子组件
<template>
<div>
{{userCopy}}
</div>
</template>
<script>
export default …Run Code Online (Sandbox Code Playgroud) 我正在使用 vuetify 的 v-select 组件。我正在尝试在下拉列表中添加搜索栏选项。
有什么内置的方法可以做到这一点吗?我使用的是 vuetify 版本 1.0.5。
<v-select
:items="users"
attach
item-text='name'
item-value='name'
v-model="association.name"
:rules='nameRule'
label="First Name"
required>
</v-select>
Run Code Online (Sandbox Code Playgroud) 我有一个如下的 vue,当我单击 main_component 中的按钮时,我想将其下载为 PDF。请帮助我找到解决方法。
下载.vue
<template>
<div>
This file includes a set of instructions to finish this process
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
主文件.vue
<template>
<div>
*Button to download the above file as PDF*
</div>
</template>
Run Code Online (Sandbox Code Playgroud) 我正在使用 vuetify v-select 组件。我面临的问题不是向下打开下拉菜单,而是希望它向上打开,因为下拉菜单位于页面底部,因此某些下拉项目不会出现。如下图所示,有多个选项是 Nunavut 没有出现。请帮我解决这个问题。
<v-layout row wrap>
<v-flex md6 xs12>
<v-select
:items="states"
:closeOnSelect="true"
multiple
attach
item-text='name'
item-value='id'
></v-select>
</v-flex>
</v-layout>
Run Code Online (Sandbox Code Playgroud) 我正在尝试使用按钮来触发输入文件。但我在这里面临的问题是,每当我单击按钮时,它都会转到 http://localhost:3000/availability?vue-file-input= url,而不是打开文件选择器。请帮我找出哪里出错了。
<div class="vue-file-wrapper">
<button class="vue-button" @click="document.getElementById('fileInput').click()">Choose File
</button>
<div>{{ filename }}</div>
<input
type="file"
ref="file"
style="display:none"
name="vue-file-input"
id="fileInput"
:disabled="user.availability"
@change="onFileSelected"
>
</div>
Run Code Online (Sandbox Code Playgroud) 我正在向方法发送可选参数,但未收到它们。使用 binding.pry 我已经检查过但未收到链接参数,但在 send_email 方法中收到了 id 参数。它总是作为零返回。请帮忙找出我出错的地方
class EmailsController < MyAccountController
def send_emails
@user = current_user
id = @user.id
HiringMailer.send_email(id, link: true).deliver_now
end
end
class HiringMailer < ApplicationMailer
def send_email(id, joining = false, options={})
link = options[:link]
binding.pry_remote
@user = User.find(id)
@joining_user = joining
to = (['abc@yah.com', 'adx@yah.com']).flatten
mail to: to, subject: "Joining Date"
end
end
Run Code Online (Sandbox Code Playgroud)
更新 1
HiringMailer.send_email(id, link: true).deliver_now
def send_email(id, joining = false, , **options)
binding.pry_remote
end
Run Code Online (Sandbox Code Playgroud) 我正在使用 Vuetify 选项卡在不同选项卡下显示两个不同的组件。我在这里面临的问题是,当mounted()我尝试使用refs组件时,它只提供了ref第一个组件的详细信息,而一般参考资料并未显示。请帮我找出哪里出错了。
我已经添加了调试器mounted(),当我这样做时,this.$refs仅显示第一个详细信息参考。
<template>
<div>
<v-tabs slot="extension"
v-model="tab_title"
centered
color="black"
slider-color="red">
<v-tab key="details" href="#tab-details">Details</v-tab>
<v-tab key="general" href="#tab-general">General</v-tab>
</v-tabs>
<v-tabs-items touchless v-model="tab_title">
<v-tab-item key="details" value="tab-details">
<v-card flat>
<Details ref="details_form"></Details>
</v-card>
</v-tab-item>
<v-tab-item key="general" value="tab-general">
<v-card flat>
<Info ref="general_form" :agent="agent"></Info>
</v-card>
</v-tab-item>
</v-tabs-items>
</div>
</template>
<script>
import Details from 'views/details.vue';
import Info from 'views/info.vue';
export default {
components: {
Info,
Details,
},
props: ['agent'],
data: function () {
return {
tab_title: …Run Code Online (Sandbox Code Playgroud)