vue. js двусторонний переплет - PullRequest
Новая
       20

vue. js двусторонний переплет

0 голосов
/ 19 февраля 2020

Я пытаюсь найти способ обновить madlib, когда пользователь вводит замены. Как, например, первая подстановка является существительным, поэтому, если пользователь вводит «дни»; затем madlib автоматически обновляется: у вас когда-нибудь был один из этих [существительных] -> У вас когда-нибудь был один из тех дней? Ниже приведен скриншот того, как выглядит страница html. Я новичок в vue. js. Я только начал изучать это вчера. Сейчас я не могу придумать, как сделать двустороннее связывание. Если вы посмотрите на код ниже, я просто использую строку с именем 'output' для представления MadLib. Может быть, мне нужен способ перебирать каждое слово в MadLib, чтобы увидеть, какое слово мне нужно обновить.

Каждый раз, когда вы нажимаете «Получить новый MadLib», он генерирует новую игру. (Я уже получил эту часть). Ниже приведен скриншот того, как выглядит страница html. И вы можете попробовать это здесь. https://yanghaobojordan.github.io/MadLib/

Below is a screenshot of what the Html page looks like

Вот мой html код: 

<div id="root">
    <button v-on:click="Random_MadLib">Get a New MadLib</button>
    <div>
        {{output}}
    </div>
    <div>
        <ul>
            <li v-for="(i,j) in words">{{i}}
                <input type="text" v-model="words[j]">           
            </li>
        </ul>
    </div>
</div>

Вот мой js код: 

import { madlibs } from './resources.js';
console.log(`${madlibs.length} madlibs loaded`);
const app = new Vue({
    el:"#root",
    data:{
        output:'',
        words:[],
        num:0
    },
    methods:{
        Random_MadLib:function(){
            //console.log(Math.floor(Math.random() * Math.floor(madlibs.length)));
            this.num=Math.floor(Math.random() * Math.floor(madlibs.length));
            this.output=madlibs[this.num].content;
            this.words=madlibs[this.num].content.match(/\[([^\])]*)\]/g);
        }
    }
})

Это git для всех кодов: https://github.com/yanghaobojordan/MadLib

index. html - файл html

index. js - это файл js file

. js имеет все MadLibs

Не забудьте запустить npm run start для размещения на локальном сервере. Модули ES6 подчиняются политике того же происхождения. Вам нужно запустить скрипт с локального сервера, открыть файл напрямую с помощью браузера не получится.

...