I'm wondering how to manage assets in aframe state component
In the example of a list
<a-entity bind-for="for: shoppingItem; in: shoppingList; key: name">
<template>
<a-entity bind__text="value: shoppingItem.name"
data-amount="{{ shoppingItem.amount }}"></a-entity>
</template>
</a-entity>
I assume you'd use something like this
<a-assets bind-for="for: asset; in: assets; key: id">
<template>
<a-asset-item response-type="arraybuffer" bind__src="asset.src" bind__id="value: asset.id" />
</template>
</a-assets>
However that would only work for videos.
If I set my inital state as such
initialState: {
hotspots: [],
assets: [{src: 'https://example.com/assets/logo.png' , id: 'logo'}]
},
And plan on populating those asset arrays with the src and id of each asset, then SRC is not making it to the entity with the error:
Cannot read property 'match' of null
at FileLoader.load (aframe-master.js:28912)
at HTMLElement.value (aframe-master.js:57743)
at HTMLElement.wrappedMethod (aframe-master.js:59621)
I tried <a-asset-item response-type="arraybuffer" src="{{asset.id}}" bind__src="value: asset.src" bind__id="value: asset.id" />
And that doesn't work either.
Bind only works with entities. It does not make sense to use a run-time state binder with an asset preloading system.
<a-entity bind__material="src: assetUrl">
Related
I facing such strange warning.
I defined non-Array types look like posted sample codes.
But, Vue3 was throwing warnings.
Have some solutions??
or I got some miss takes?
Simply, I was defined modelValue type look like T | T[] | undefined
But, Vue3 detected Null | Array.
Then, How a T are have been ignored??
I'm using Nuxt3, Vue3, composition api
// types/index.d.ts
type ItemType { [key: string]: any } | string | boolean
// CSelect.vue
<template><div>{{/* contents - It's not a key on this Topic */}}</div></template>
<script setup lang="ts" generic="T extends ItemType">
defineProps<{
items: T[]
modelValue: T | T[] | undefined
}>()
</script>
// create.vue - how i used
<template>
<div class="create">
<div class="title-area">
<CForm>
<InputTemplate>
{{/* This CSelect components are Throw warnings by v-model */}}
<CSelect
v-model="data.category"
class="nft-input"
:items="categoryItems"
/>
</InputTemplate>
</CForm>
</div>
<div>
</template>
<script setup lang="ts">
const categoryItems = computed(() => ['value1', 'value2', 'value3'])
const data = reactive({ category: String(categoryItems.value[0]) })
</script>
[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Null | Array, got String with value "Limited".
at <CSelect modelValue="Limited" onUpdate:modelValue=fn class="input" ... >
at <InputTemplate title="Category" >
at <CForm modelValue=false onUpdate:modelValue=fn class="inputs-area" ... >
at <Create onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <Anonymous key="/member/99/create" routeProps= {Component: {…}, route: {…}} pageKey="/member/99/create" ... >
at <Anonymous >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <Default >
at <Anonymous key="default" name="default" hasTransition=false >
at <Anonymous >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>
Your parent component create.vue has no setup and lang="ts". You're passing to a child v-model and class with no : so they aren't props, they are attributes. div element will have them because he is a root element.
Example how to use attributes:
<template>
<div>
<label :for="label">{{label}}</label>
<input v-bind="$attrs" :id="label" :value="$attrs.modelValue" #input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script setup>
defineProps(['label'])
defineEmits(['update:modelValue'])
</script>
v-bind assign all attributes to one element.
I'm not using generic in components, so I can just tell you stop! User don't care about generic, and you are not experienced programmer to build UI libraries for different programmers.
I'm getting this super confusing Vue warning and I can't figure it out:
[Vue warn]: Property "me" was accessed during render but is not defined on instance.
at <UserReputation user= {reputation: {…}, _id: '638f81dbb288267e6340ddbc', username: 'artsborba'…} class="mt-1" >
...
Here on StackOverflow I can find more topics with this warning, but seems each one is a different case, and mine is just not making sense! My vue version is ^3.1.0, vuetify ^3.1.0 and vite ^2.5.4.
My component looks like:
// MyComponent.vue
<v-menu location="end" location-strategy="connected">
<template #activator="{ props }">
<div
v-bind="props"
class="user-info-container cursor-pointer"
>
<UserAvatar
:user="me"
/>
<div v-if="me" class="user-data">
<div class="username-row">
{{ me.username }}
<AppIcon
icon="downward-arrow"
color="primary"
class="user-menu-icon"
:class="{ 'is-active': props['aria-expanded'] === 'true' }"
/>
</div>
<!-- HERE WE HAVE THE WARNING SOURCE -->
<UserReputation :user="me" class="mt-1" />
</div>
</div>
</template>
...
</v-menu>
In the same component I have the me set as a prop:
props: {
me: {
validator: prop => typeof prop === 'object' || prop === null,
required: true
}
},
Now, please notice that in the same component I have another one using this me pro (<UserAvatar :user="me"...>), which doesn't trigger this warning. Only the <UserReputation... component usage does! If I comment out the <UserReputation... tag, the warning goes away.
I already tried placing this me as a computed value instead of a prop, directly inside MyComponent.vue (it comes from a Pinia store) and many other structures with no success. Hopefuly someone can help on this! Thanks in advance.
Maybe you are accesing at me property inside your UserReputation component, but in the parent you are passing me to user prop, like this :user="me", so... you need to access to user prop instead me prop inside UserReputation component.
If this answer doesn't resolve the question, please share us the structure of UserReputation component.
I'm using MDX with NextJS. I can override heading elements successfully.
In my MDX:
###### This is an h6
In my React component:
const CustomH6 = ({ children }) => {
return <h6 style={{ background: "gold" }}>{children}</h6>;
};
<MDXRemote
{...props.content}
components={{
h6: CustomH6,
}}
/>
However I can't get this working for image elements.
I've tried using a regular image in my MDX:
<img src="/image.jpg" alt="alt text" />
But the 'CustomImage' isn't used and the image renders normal.
<MDXRemote
{...props.content}
components={{
img: CustomImage,
}}
/>
I also tried using the markdown syntax for the image:
Then it does work but I get an error in the webpage:
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
I have successfully bound data in a two way format in vue 3 like this :
<template>
<p for="">Year of Incorporation</p>
<input type="text" v-model="input" />
<div>
{{ input }}
</div>
</template>
<script>
export default {
setup() {
let input = ref("")
return {input};
},
};
</script>
What I want to do now is put the input inside a child component like this:
Parent Component:
<template>
<Child v-model="input" />
{{input}}
</template>
Child Component:
<template>
<input type="text" v-model="babyInput" />
</template>
<script>
export default {
setup() {
let babyInput = ref("")
return {babyInput};
},
};
</script>
The Vue.js documentation presents a nice way of handling v-model-directives with custom components:
Bind the value to the child component
Emit an event when the Child's input changes
You can see this example from the docs with the composition when you toggle the switch in the right-top corner (at https://vuejs.org/guide/components/events.html#usage-with-v-model).
In Vue 3, when I register a component to use, I use the following in my .js file:
import blogpost from '../../../blogpost.vue'
app.use(blogpost);
I create a simple component, i.e. BlogPost.vue.
<!-- BlogPost.vue -->
<template>
<h4>{{ title }}</h4>
</template>
<script>
export default {
name: 'BlogPost',
props: ['title']
}
</script>
In my html file, I call the following:
<div id="app">
<blogpost title = 'test'/>
</div>
When I run the app, I get the following:
runtime-core.esm-bundler.js?fea0:38 [Vue warn]: Failed to resolve
component: blogpost.
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
It's like Vue can't render the component. I am using webpack to compile, so if I put the wrong location in, it errors out. So the location is right, I guess?
Is there something I am doing wrong?
I don't know whether you have solved this, anyway, here is the answer. Use app.component() to globally register a component (look here).