Создание динамического списка Vue, который можно обновлять с помощью пользовательских реквизитов в HTML - PullRequest
Новая
       17

Создание динамического списка Vue, который можно обновлять с помощью пользовательских реквизитов в HTML

1 голос
/ 09 мая 2019

Впервые на VueJS. Я пытаюсь создать пользовательский компонент ul для веб-страницы, которую можно заполнять и обновлять с помощью пользовательских реквизитов (желательно строк, но не обязательно), особенно в HTML, чтобы любой другой разработчик мог просто использовать / update / add к пользовательскому компоненту с указанной пропой, и он добавит новый li путем добавления второго, третьего, четвертого и т. д. проп, добавляя предыдущий li. Я также изо всех сил пытаюсь понять, можно ли использовать более одного типа ввода для пользовательского реквизита. Для лучшего объяснения здесь приведен кодированный пример того, что у меня сейчас есть и что я хотел бы сделать: 

Vue.component('resources', {
 template: `
      <!-- Resources Component -->
      <div class="resources">
           <div class="heading">
                <p>Resources</p>
           </div>
           <ul class="resource-list">
                <li v-for="item in items">
                     <a :src="item[source]">{{ item.message }}</a>
                </li>
           </ul>
      </div>
 `,
 props: {
      source: {
           type: String,
           default: "."
      },
      message: {
           type: String
      }
 },
 data () {
      return {
           items: [
                { 
                     message: {
                          type: String
                     },
                     source: {
                          type: String,
                          default: "."
                     } 
                }
           ]
      }
   }
 });

И в моем HTML компонент выглядит так: 

<helpful-resources
       message="test"
       source="."
></helpful-resources>

У этой 1000% много проблем, но в идеале я хотел бы иметь что-то вроде этого: 

<helpful-resources
       item: src="example url 1" message="test message 1"
       item: src="example url 2" message="test message 2"
></helpful-resources>

С каждым добавлением нового «элемента», добавляя предыдущий элемент списка к новому с возможностью многократно изменять src и сообщение по мере необходимости, сколько бы элементов не требовалось в списке.

Любая помощь / разъяснения будет принята с благодарностью. Спасибо!

1 Ответ

2 голосов
/ 09 мая 2019

В родительском компоненте: 

<template>
    <div class="resources">
        <div class="heading">
            <p>Resources</p>
        </div>
        <Helpful-resources :listItems="listItems"></Helpful-resources>
    </div>
</template>

<script>
    @import HelpfulResources from '@/path/to/HelpfulResources';

    export default {
        name: 'Resource',
        components: {
            HelpfulResources 
        },
        data() {
            return {
                listItems: [
                  {src: 'link to item', message: 'special message'}, 
                  {src: 'link to item2', message: 'special message2'}, 
                  // More items ...
                ]
            }
        }
    }
</script>

<style lang="scss">
    /* styles */
</style>

Ваш компонент может иметь такую ​​структуру: Helpful-resources.vue 

<template>
    <ul class="resource-list">
        <li v-for="(item, index) in listItems" :key="'listItem-'+index">
            <a :href="item.src">{{ item.message }}</a>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'helpful-resource',
        props: [ 'listItems'],
        data() {
            return {
                // More data ...
            }
        }
    }
</script>

<style lang="scss">
    /* styles */
</style>

Примечание это стиль vue-cli, но вы можете изменить его в соответствии со своими потребностями.

РЕДАКТИРОВАТЬ

Чтобы включить его в HTML-файл, вы быпоместите ваши компоненты Vue в тело, теги сценария чуть ниже тега тела. 


<div id="app">
  <resources :source="someData" :message="message" id="r"></resources>
</div>


 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>

    let resources = Vue.component('resources', {
   template: `<div class="resources">
                            <div class="heading"><p>Resources</p></div>
                <ul class="resource-list">
                    <li v-for="(item, index) in items" :key="index"><a :href="source">{{ item.message }}</a></li>
                </ul>
              </div>`,
   props: {
        number: Number,
        source: {
             type: String,
             default: "."
        },
        message: {
             type: String,
             default: 'No message'
        },
        // Example of multiple data types
        propB: [String, Number] 
   },
   data() {
         return {    
                items: [
                  { 
                       message: this.message,
                       source: this.source
                  }
             ]
         }
     }
   });

    new Vue({
      el: '#app',
      components: {
        resources
      },
      data: {
        someData: 'path/to/source',
        message: 'Special Message'
      },
    });
  </script>

В любом случае, вот ссылка на скрипку ... Fiddle

Насколько далекоПо мере обновления списка вы можете использовать вызов API для асинхронного получения данных или позволить пользователям добавлять информацию с помощью кнопки или ввода и использовать метод.Или, если вы говорите строго жесткие дополнительные значения, другие разработчики добавят в ваш файл ...

Надеюсь, это поможет.Если нет, уточните.

...