标签: bootstrap-vue

我在 bootstrp-vue 模式中使用了 vue-clipboard2 插件。但文字并非抄袭。

然后我尝试在 bootstrap-vue 模式中使用 vanilla js 复制到剪贴板。但文字并非抄袭。

任何人都可以找出问题所在吗？

我正在用来Bootstrap-vue.JS制作一组单选按钮。我有一个重置功能来检查单选按钮之一。当我调用该函数时，单选按钮的值按我的预期发生变化，但单选按钮本身没有显示其变化（圆圈没有变成蓝色）

这是模板

<b-row md="9" align-h="center">
 <b-form-group>
  <b-form-radio-group
   id="radio-group-1"
   v-model="voc_type"
   name="radio-options"
  >
   <b-form-radio value="Request">Request</b-form-radio>
   <b-form-radio value="Complain">Complain</b-form-radio>
   <b-form-radio value="Saran">Saran</b-form-radio>
   <b-form-radio value="Pujian">Pujian</b-form-radio>
  </b-form-radio-group>
 </b-form-group>
</b-row>
{{ voc_type }}

这是创建时的初始化vue

export default{
 data{
  return{
   voc_type: 'Request',
  }
 }
}

这是重置函数

reset(){
 this.voc_type= 'Request'
}

当我调用 时reset()， 的输出{{ voc_type }}如我所料是“Request”，但单选按钮没有变成蓝色。idk为什么..

我正在尝试将图像添加到BoostrapVue 中 b-carousel 的img-src=""属性。该图像当前保存在 asset 文件夹中。

  <b-carousel-slide img-src="../assets/life.jpg">
        <h1>Hello world!</h1>
      </b-carousel-slide>

我添加了查找结果的下面图像：

我确信图像已正确保存在正确的位置：

如果启用该功能（如果您选择复选框），我正在尝试将一个字段设置为必填字段。但该验证不会通过单击选择/取消选择复选框来触发

 <b-form-checkbox v-model="form.banner.enabled">
     <span class="label-title control-label">Enable</span>
 </b-form-checkbox>

Vue.js

validations: {
    form: {
        banner:{
            image:{
                required: requiredIf(function() {
                    console.log("Image validator called")
                    return this.form.banner.enabled;
                })
            }
        }
    },
  },

我取消选中复选框，静态图像字段给出错误Its required

<b-form-input id="bannerImage" name="bannerImage" v-model="form.banner.image" :state="$v.form.banner.image.$dirty ? !$v.form.banner.image.$error : null"></b-form-input>
<b-form-invalid-feedback >
     <span >The image field is required.</span>
</b-form-invalid-feedback>

您可以复制 - 删除图像的值并取消选中enabled选项，然后单击保存。它会给出一个错误The image field is required.，因为验证器没有调用提交。提交代码是

this.$v.form.$touch()
if (this.$v.form.$anyError) {
     return; //return if any error
}
//execute save form code if no error

参考图片

在带有 bootstrap-vue 的 vue 项目中，我搜索 select 组件如何工作 https://bootstrap-vue.js.org/docs/components/form-select/ ，但没有看到它有任何过滤器选项吗？如果没有，是否还有其他一些带有过滤器选项的 bootstrap-vue 选择组件/库？

"bootstrap-vue": "^2.1.0"
"vue": "^2.6.10"

谢谢！

我想让标签内嵌其单选按钮：

<b-form-group label="Zobrazit">
  <b-form-radio-group id="radio-group-2" v-model="absoluteValues" name="radio-sub-component">
    <b-form-radio value="true">Hodnoty</b-form-radio>
    <b-form-radio value="false">Procenta</b-form-radio>
  </b-form-radio-group>
</b-form-group>

它看起来是这样的：

我在FormGroup元素中找不到任何相关属性。对齐Label-align文本但不会合并两行。

更新：

label-col=1将所有收音机放在同一行，但收音机未垂直对齐：

我正在使用 bootstrap-vue。对于 b 表的分页，我使用了 b-pagination 组件，模板代码如下：

<div class="description perpage">Per page</div>

  <b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>

  <b-col sm="7" md="6" class="pagination">
    <b-pagination
      :total-rows="totalRows"
      v-model="currentPage"
      :per-page="perPage"
      align="fill"
      class="my-0"
      aria-controls="my-table"
      last-number
    ></b-pagination>
  </b-col>

  <div class="description found">Found: {{this.totalRows}}</div>
</div>

<b-table
  id="my-table"
  show-empty
  striped
  hover
  sticky-header="true"
  :items="filteredItems"
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc">

脚本部分如下：

data() {
return {
  totalRows: 1,
  perPage: 10,
  currentPage: 1,
  sortBy: "name",
  sortDesc: false,
  pageOptions: [5, 10, 20, 50, "show all"],
  fields: [..myfields]

};

}

如果我在选项字段中使用“显示全部”，它将显示所有行，但它不会正确地将分页设置为仅一个可用页面。

当前显示

我希望实现显示正确的分页选项（仅一页），或者能够在创建“显示全部”选项时隐藏整个分页。

我怎样才能完成这件事？

我正在尝试使用 vuejs 中的 veeValidate 生成带有验证的动态表单，我尝试执行此操作的方法是在组件的数据内创建一个对象数组，例如：

data(){
   return{
inputs: [
      {
        id: 1,
        label: "first name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      },
      {
        id: 2,
        label: "last name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      } ]
   }
}

对于 html：

  <ValidationObserver v-slot="{ handleSubmit }">
    <b-form @submit.prevent="handleSubmit(onSubmit)" class="p-5">
      <div v-for="inp in inputs" v-bind:item="inp" :key="inp.id">
        <ValidationProvider name="Value" :rules="inp.rules" v-slot="validationContext">
          <b-form-group
            :id="'input-group-'+inp.id"
            :label="inp.label"
            :label-for="'input-'+inp.id"
            label-cols="4"
            label-cols-lg="2"
          >
            <div v-if="inp.type != 'select'">
              <b-form-input
                :type="inp.type"
                :placeholder="inp.placeholder"
                v-model="inp.model"
                :id="'input-'+inp.id"
                :name="'input-'+inp.id"
                :state="getValidationState(validationContext)"
                aria-describedby="input-1-live-feedback" …

我正在使用 bootstrap-vue 在 b-table 上显示我的数据，我截断了长文本，并使用 title prop 将鼠标悬停在其上时显示原始文本。它与客户 css 配合得很好，但我想使用 b-tooltip

  <b-table hover  sticky-header outlined 
show-empty
      small
      stacked="md"
      :items="apiitems"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      :filterIncludedFields="filterOn"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      :sort-direction="sortDirection"
      @filtered="onFiltered">
   <template v-slot:cell()="data">
        <span :title='data.value'>{{ data.value}}</span>
      </template>
 </b-table>

   fields: [
        { key: 'actions', label: 'Actions' , class: 'truncate1'},
   
         {key: 'key3',     label: 'label 3'    , sortable: true, class: 'truncate1'},
         {key: 'key4',      label: 'lable 4'    , sortable: true, class: 'truncate1'},

         {key: 'keyn',      label: 'lable n'    , sortable: true, class: 'truncate1'},
      ],

    <style>
    .truncate1 {
        max-width: …

如何在<b-nav-item-dropdown>Bootstrap-Vue 中使用点击事件，如下所示？我查看了 Vue.js 文档，但找不到<b-nav-item-dropdown>.

<b-nav-item-dropdown text="nav_title">
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
</b-nav-item-dropdown>