小编use*_*413的帖子

vue中如何设置条件规则和必填字段?

我正在尝试将几个字段设置为有条件必填。但我无法让它发挥作用。我已经设置了一个数据字段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)

javascript vue.js vuetify.js

7
推荐指数
1
解决办法
8202
查看次数

在父组件创建问题之前安装在子组件中执行

我正在开发 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)

javascript components vue.js

7
推荐指数
1
解决办法
8526
查看次数

vuetify 的 v-select 组件中的搜索栏

我正在使用 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)

javascript vue.js vuetify.js

5
推荐指数
2
解决办法
2万
查看次数

如何在vuejs中将vue文件下载为pdf文件?

我有一个如下的 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)

javascript vue.js vuetify.js

3
推荐指数
1
解决办法
3万
查看次数

自定义 v-select 下拉位置

我正在使用 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)

css vue.js vuetify.js

2
推荐指数
2
解决办法
6796
查看次数

在Vuejs问题中使用输入文件按钮

我正在尝试使用按钮来触发输入文件。但我在这里面临的问题是,每当我单击按钮时,它都会转到 http://localhost:3000/availability?vue-file-input= url,而不是打开文件选择器。请帮我找出哪里出错了。

<div class="vue-file-wrapper">
 <button class="vue-button" @click="document.getElementById('fileInput').click()">Choose&nbsp;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)

javascript vue.js

1
推荐指数
1
解决办法
1283
查看次数

获取在 rails 中不起作用的可选参数

我正在向方法发送可选参数,但未收到它们。使用 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)

ruby ruby-on-rails ruby-on-rails-5

0
推荐指数
1
解决办法
62
查看次数

已安装挂钩中 v-tab-item 内容的引用为空

我正在使用 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)

javascript vue.js vuetify.js

0
推荐指数
1
解决办法
1884
查看次数