Category : vue-component

In: https://codesandbox.io/s/vskdf why doesn’t the template render when put inside draggable: InventorySectionGroup: <template> <!– this div renders –> <div class="inventory-section-group"> <p>{{ itemSectionGroupProps.itemSectionCategoryName }}</p> <div v-for="group in itemSectionGroupProps.itemSectionCategoryItemList" :key="group.itemSectionCategoryId" > <inventory-section-group-item :itemDataProps="group"> </inventory-section-group-item> </div> <!– div doesn’t render 🙁 <draggable v-model="itemSectionGroupProps.itemSectionCategoryItemList"> <transition-group> <div v-for="group in itemSectionGroupProps.itemSectionCategoryItemList" :key="group.itemSectionCategoryId" > <inventory-section-group-item :itemDataProps="group"> </inventory-section-group-item> </div> </transition-group> </draggable> –> </div> ..

Read more

In https://codesandbox.io/s/v9pp6 the ChromePage component passes a prop to InventorySectionC: <inventory-section-component :itemSectionProps="getItemSection"> </inventory-section-component> InventorySectionC: <template> <div class="inventory-section-component"> <draggable v-model="itemSectionProps.itemSectionCategory"> <transition-group> <div v-for="category in itemSectionProps.itemSectionCategory" :key="category.itemSectionCategoryId" > <!– <p>{{ category.itemSectionCategoryName }}</p> –> <inventory-section-group-component :itemSectionGroupData="category"> </inventory-section-group-component> </div> </transition-group> </draggable> </div> </template> <script> import InventorySectionGroupComponent from "./InventorySectionGroupC"; import draggable from "vuedraggable"; export default { name: "InventorySectionComponent", components: { ..

Read more

While replicating: https://sortablejs.github.io/Vue.Draggable/#/nested-example (code) I ran into an issue related to the model; how can I add draggable to vue components instead of a raw json (as used in the example). What I want to do is, add drag and drop to: https://codesandbox.io/s/gg1en (each item can be moved ("dragged") from one group to another, each ..

Read more

I’m trying to get img src attribute from a json file but the images are not shown and the alternate texts are. I’m sure that the images are found in the directory src/assets and thier names are right. this is the component: <template> <div> <div class="project" :title="title" :image="image" :desc="desc"> <div class="p-title">{{title}}</div> <div class="p-image"> <img :src="image" ..

Read more

I create vue component library. Functionally, it work but css doesn’t work. How can I apply library’s components? this is the code. Library Component: <template> <div> <div class=”authorsPreview” v-for=”(item, index) in authors” :key=”index”> <span class=”createdAuthor”>{{ item.name }} / {{ item.name_kana }}</span> <div class=”deleteAuthorBtn” v-on:click=”deleteEvent” :index=”index”> x </div> </div> </div> </template> <script> export default { props: ..

Read more

How can I send events from an external js file to Vue components? connection.on( "ReceiveMessagePrivate", (GroupGuid, UserGuid, UserName, MessageGuid, MessageText, TimeString, FileName, FileType) => { dataJson = { GroupGuid: GroupGuid, UserGuid: UserGuid, UserName: UserName, MessageGuid: MessageGuid, MessageText: MessageText, TimeString: TimeString, FileName: FileName, FileType: FileType }; console.log(GroupGuid); return dataJson; } ); Source: Ask Javascript..

Read more

I want to get ‘currentSrc’ value from video object. That’s my code mounted: function () { this.$nextTick(function () { console.log(document.getElementById(‘video’).currentSrc) }); }, No matter what I do, I alway get an <empty string>. Which is pretty strange due to a fact that when I do: mounted: function () { this.$nextTick(function () { console.log(document.getElementById(‘video’)) }); }, ..

Read more