小编Jas*_*son的帖子

我正在使用代码形式教程并稍微修改它.我遇到了编辑功能的问题.我一直得到一个"ReferenceError:$ modal未定义"这里是我的代码.

postCtrl:

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.filter('dateToISO', function() {
  return function(input) {
    input = new Date(input).toISOString();
    return input;
  };
});
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data) {
    Data.get('posts').then(function(data){
        $scope.posts = data.data;
        $scope.currentPage = 1; //current page
        $scope.filteredItems = $scope.posts.length; //Initially for no filter  
        $scope.totalItems = $scope.posts.length;
        $scope.list_pages = [
                {
                    id: '5',
                    name: '5'
                }, {
                    id: '10',
                    name: '10' …

我正在尝试使用 Vuetify 2.3.5 以编程方式打开和关闭扩展面板

<v-expansion-panels accordion>
    <v-expansion-panel v-for="(item,i) in faqs" :key="i">
        <div class="expansion-panel-header-container">
            <div class="handle"><v-icon>$drag_icon</v-icon></div>
            <v-expansion-panel-header hide-actions expand-icon="$edit">
                <span class="font-weight-bold">{{item.question}}</span>
            </v-expansion-panel-header>
            <div class="action-icons">
                <v-icon @click.native="doSomething">$edit</v-icon>
                <v-icon>$delete</v-icon>
            </div>
        </div>
    <v-expansion-panel-content>
        CONTENT GOES HERE
    </v-expansion-panel-content>
<v-expansion-panels accordion>

目前， v-expansion-panel-header 成为触发面板打开和关闭的整个按钮，但我想禁用该功能并用它触发打开和关闭<v-icon @click.native="doSomething">$edit</v-icon>。

我找不到有关如何执行此操作的任何文档。

有谁知道我如何才能实现这个功能？

我想弄清楚如何让我的动态生成的按钮在 for 循环中每个都有一个单独的加载程序。Vuetify 有带加载器的按钮。

我遇到的问题是，当这些按钮处于 for 循环中并被单击时，它们都会显示加载指示器。我只想要点击显示加载指示器的那个。

HTML：

<div v-for="(item, i) in items" :key='i'>

<v-btn 
dark 
color="pink"
:loading="loading"
@click="loader = 'loading'"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

脚本

data () {
      return {
        loader: null,
        loading: false
      }
    },

假设我有 3 个项目。上面的代码将生成三个按钮，但它们都将共享相同的加载参数。我怎样才能让每个按钮使用它唯一的加载参数？与往常一样，非常感谢任何和所有帮助。

这是一个 Vue.js 项目，我正在使用 Vuetify。我有一个导航抽屉。当屏幕宽度为 1263px 时，resize-watcher 启动并关闭抽屉。我可以使用“永久”来防止这种情况。我希望它做的是，而不是将抽屉开关关闭到 mini。

这是我现有的代码。

<v-navigation-drawer 
    clipped 
    :mini-variant="mini"
    v-model="drawer"
    permanent
    app
    hide-overlay
>
    <v-list dense>

        <v-list-tile
        v-for="(item, index) in authorized"
        :key="index"
        @click="sendComponent(item)"
        >

        <v-list-tile-action>
            <v-tooltip right slot="activator">
                <v-icon slot="activator">{{ item.icon }}</v-icon>
                <span>{{ item.title }}</span>
            </v-tooltip>
        </v-list-tile-action>

        <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>

        </v-list-tile>
    </v-list>
</v-navigation-drawer>

https://codepen.io/jsd219/pen/gJJMPQ

任何帮助深表感谢

我知道这有一个简单的解决方案.也许是因为它已经很晚了,但我已经撞墙了.我有一个容器div #jewelsContainer,里面有一个子div列表.我在这样的对象中抓住它:

var existingBoardItems = $('#jewelsContainer').html();

此对象生成#jewelsContainer容器div 内所有div的列表

即之前

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
<div class="aff_score" style="left:0px; top:0px;">+10</div>
...

后

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div …

我正在用 Vue.js 构建一个新的应用程序，并遇到了我认为是一个简单的问题，但还没有找到解决方案。

我有一个问题，有三个答案。我只希望用户能够点击一次我知道我可以使用的答案， @click.once但我需要让用户知道它在 UI 中不再可点击。我尝试过一些类似的方法，<button :disabled="submitted" @click="checkAnswer('q1','3'), submitted = true"></button>但这会同时禁用所有三个按钮。有人可以告诉我如何在用户单击按钮后禁用它并使其独立于其他按钮吗？我真的很感激任何帮助。

HTML：

<ul>
    <li><button class="btn blue" @click="checkAnswer('q1','1')">Answer 1 for q1</button></li>
    <li><button class="btn blue" @click="checkAnswer('q1','2')">Answer 2 for q1</button></li>
    <li><button class="btn blue" @click="checkAnswer('q1','3')">Answer 2 for q1</button></li>
</ul>

代码：

export default {
name: 'Questions',
props: ['clue'],
data(){
    return {
        feedback: null,
        answer: null,
        answers: {
            q1: '2',
            q2: '1',
            q3: '3'
        }
    }
},
 methods: {
    checkAnswer(q, a) {
        if(a == this.answers[q]){
            this.answer = "Congrats!"
        } else {
            this.answer …