小编Lin*_*inx的帖子

我有一个包含许多组件的 Vue 应用程序。目前，我在 index.html 文件的头部包含了 Font-Awesome，但实际上只有一个页面或组件需要它。是否可以将其移动到组件本身，以便仅在需要时加载？

移动这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

对此

<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
    export default {
        name: 'SingleComponent',
        data: function() {
            return{}
        }
    }
</script>
<style scoped>
</style>

我试过下载 Font-Awesome 并在上面的组件中添加一个链接标签 ^^^^ 我没有收到任何错误，但图标仍然不起作用。

我有一个 Vue 组件，它有一个“选择状态”下拉元素。我想添加一个 js 函数，用 50 个状态填充选项，而不必对它们进行硬编码。我还将在其他几个地方提供此下拉菜单，因此我希望从组件外部访问此函数。实现这一目标的最佳方法是什么？

<template>
    <div class="section" v-bind:class="sectionClass" data-mh="group3"> 
        <h3>{{sectionTitle}}</h3> 
        <div class="section-content display-area"> 
            <i class="icon icon-health img-left"></i> 
            <form> 
            <div class="row mt"> 
                <div class="col-xs-12 col-sm-8"> 
                  <div class="same-height-parent"> 
                      <div class="same-height"> 
                          <input type="text" class="form-control" placeholder="Enter Name"> 
                      </div>                                                 
                      <div class="same-height"> 
                          <select name="state" id="state" class="form-control" tabindex="9"> 
                              <option value="">- Select State -</option>
                          </select>                                                     
                      </div>                                                 
                  </div>                                             
                  <!-- same-height-parent -->                                             
                </div>                                         
                <div class="col-xs-12 col-sm-4"> 
                    <button type="submit" class="btn btn-success btn-block btn-fz20">Search</button>
                  </div>                                         
               </div>                                                                       
            </form>                                 
        </div>              
    </div>
</template>

<script>
    export default {
        name: 'nameSearch',
        data: function() { …

我有一个Vue组件,它将根据用户之前在前一个组件中单击的内容显示数据.当他们最初点击时,我设置'当前'索引.然后,当他们到达下一页时,我有一个将在数据数组中查找并返回"当前"数据的getter.

他们被重定向到的组件是他们可以编辑的表单.我希望能够预先填充"当前"数据.不作为占位符,而是作为实际值,以便他们可以直接编辑它.

问题是我不知道如何将从getter返回的值设置为数据函数值,以便它们可以与v-model绑定.

HTML

<input type="text" class="form-control" id="nickname1" v-model="name" name="name">
<input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" > 
<input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" > 

VUE

data: function() {
    return {
        name: this.currentArea.title,
        address: this.currentArea.address,
        city: this.currentArea.city,
        state: this.currentArea.state
    }
},
computed: {
    currentArea() { return this.$store.getters.currentArea }
}

*this.currentArea.title和currentArea.title不起作用.

*如果我绑定占位符,数据显示正确,因此getter函数正确返回currentArea

我试图将对象数组绑定到 v-select，以便当用户选择一个选项时，我可以访问与该选项关联的多个数据点。但是，我只希望它在下拉列表本身中显示一个值，即名称。如果我使用 itemText 使其在下拉列表中正确显示，它只会将其绑定到该名称，而我无权访问与其关联的其余信息。

例如，这是我的对象数组：

    memberships = [{
     memberExpirationDate: (...),
     memberUsername: 'John Jones',
     membershipId: 234
     membershipProfileName: 'Sample Profile Name'
    }]

这是我的 v-select：

    <v-select v-model="selectedMember"
       :items="memberships"
       item-text="membershipProfileName"
       filled
       required>
    </v-select>

然后，当我想使用它时selectedMember，将其设置为“示例配置文件名称”而不是整个成员资格对象。我如何将值绑定到整个对象？

我正在尝试从嵌套在 Mongo 对象中的对象获取信息。数据结构如下所示：

Card{
    _id;
    contributors: [
        {
            name;
            _id;
        },
        {
            name;
            _id;
        }
    ]
}

这是我尝试访问“贡献者”数组中的特定“贡献者”。

Card.findOne({_id: cardId, "contributor._id": contributorId},
    (err, contributor) => {
        if (err) {
            console.log(err);
            res.status(500);
            res.send({status: "error", message: "sass overload"});
            return;
        }
    console.log(contributor);
    res.send(contributor);
});

我有一个 Vue 模板，它循环遍历数组并创建一个表。表中的每个项目还都有一个我想要将单击事件绑定到的按钮，并传入将在单击函数中使用的令牌。

当我尝试使用插值传递令牌时，出现以下错误：

onclick="getClickedResult({{result.reportToken}})": 
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. 
For example, instead of <div id="{{ val }}">, use <div :id="val">

我知道我可以使用 v-on:click="setClickedResult()" 绑定点击函数，或者我可以使用 :id="val" 将令牌附加到按钮，但我对如何组合这些以便令牌感到困惑正确地传递到函数中。

我正在尝试使用 Vue.js 构建一个评论页面，它将采用一个对象数组，并在页面上为数组中的每个评论插入一个部分。它还应该显示相应的名称、评级、评论文本等。

以下代码已完成一半工作。数据已正确设置到 Vue，并且正在构建页面上的所有 div，但是插值不起作用。div 为空；数据未显示。

超文本标记语言

<div class="reviews-holder" id="review-holder">
    <div v-for="review of reviews" class="review-container">
        <div class="row border-bottom">
            <div class="col-sm-6 col-xs-12">
                <h5>{{ review.name }}</h5>
                <p>Reviewed on {{ review.time }}</p>
            </div>
            <div class="col-sm-6 col-xs-12">
                <div class="pull-right rating rating-header">
                    {{ review.rating }}
                </div>
            </div>
        </div>
        <h4>{{ review.title }}</h4>
        <span class="review-text">{{ review.review }}</span>
    </div>

JS

$(document).ready(function() {
    $.post("/api/getReviews", dto, function(res){
        if (res.ok) {
            console.log("res.res", res.res);

        var reviewsVue = new Vue({
                el: '#review-holder',
                data: {
                  reviews: res.res
                },
                components: {
                  VPaginator: VuePaginator
                }, …

我有一个运行正常的fancybox 照片库，但我正在尝试为照片添加标题，但根本无法显示它们。

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />

<a data-fancybox="gallery" class="party" title="I met Anna in 2007 while in college at NAU in Flagstaff, AZ." href="images/anna.jpeg">
    <img class="smig" src="images/anna.jpeg">
</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>

JS

$(document).ready(function() {
  $("a.party").fancybox({
      helpers : {
          title: {
              type: 'inside'
          }
      }
  });
});

请帮忙！

我有一个带有 CSS 箭头（和线）的选择下拉列表。如果您单击箭头以外的任何位置，下拉菜单会打开，但如果您直接单击箭头，则不会打开。我希望箭头也可以点击。

这是我的代码：

.select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}

<div class="select">
  <select class="form-control" id="state-dropdown">
	<option>Select State</option>
  </select>
</div>