Types and Props

inside components folder, create JobsList.vue

type “ts” + click on bottom option

1	<script> composition - ts.vue

There should be boilerplate code. Let’s add template and style.

import { defineComponent } from 'vue'

import { defineComponent } from 'vue'

export default defineComponent({

setup() {

})

</script>

Now we declare and import in file App.vue.
then put it inside of components object to use it.

...

import JobList from './components/JobList.vue'

export default defineComponent({

...

components: {

JobList

get rid of our placeholder template code and replace it with our component. The jobs data that we have in setup should now be passed inside the props as well:

</div>

</template>

Implementing JobList

We make an object for props property. Then declare jobs property. This property is the options of how jobs is declared. We say it is required, and of type Array.

export default defineComponent({

props: {

jobs: {

required: true,

type: Array

}

In our template, we put the necessary html and a ul. For the li, we cycle through jobs using v-for. It needs a unique key prop. We have it in jobs data array as id.

JobsList.vue

<ul>

</li>

</ul>

</div>

</template>

import { defineComponent } from 'vue'

export default defineComponent({

props: {

jobs: {

required: true,

type: Array

}

setup() {

})

</script>

If you were to run the site, you’ll see the list of titles.

Next we declare props for the component. If you were to use say Array for prop jobs, it doesn’t know what properties are available for each job because in props jobs declaration, we only declared it
as Array.

JobsList.vue

props: {

jobs: { // prop jobs

required: true,

type: Array

}

Hence, no code suggestions when you use it in template.

The solution is that we need to type our props better.

Using Vetur for template interpolation

JobsList.vue

import { defineComponent, PropType } from 'vue'

import Job from '@/types/Job'

export default defineComponent({

props: {

jobs: { // prop jobs

required: true,

type: Array as PropType<Job[]> // prop jobs type

}

setup() {

})

</script>

Now, you’ll be able to see different options when you try to access properties of job object.
In settings, make sure Vetur > Experimental: Template Interpolation Service is checked

JobsList.vue

<ul>

{{ job.title }} in {{ job.location }}

<p>{{ job.salary }} </p>

</div>

<p> lorem ipsum</p>

</div>

</li>

</ul>

</div>

</template>

Functions

ref – https://www.youtube.com/watch?v=usSBsgWNUZk

We want jobs to be reordered by salary, title..etc.

<button>order by title</button>

<button>order by salary</button>

<button>order by location</button>

</div>

add event handler to each of them.

create file types/OrderTerm.ts

1 2	type OrderTerm = 'location' \| 'title' \| 'salary' export default OrderTerm

first create this function

App.vue

import OrderTerm from './types/OrderTerm'

set() {

const jobs = ref<Job[]>([...])

const order = ref<OrderTerm>('title')

const handleClick = (term: OrderTerm) => {

order.value = term

}

return { jobs, handleClick, order }

}

First look at order reference. We pass it into JobList so that when a button is pressed, an event happens, and manipulates the order ref.
The change in order ref can be evaluated in JobList.

<button @click="handleClick('title')">order by title</button>

<button @click="handleClick('salary')">order by salary</button>

<button @click="handleClick('location')">order by location</button>

Since it has been set up in App.vue, we must implement this in JobList.vue

We declare order prop.

components/JobList.vue

import OrderTerm from '@/types/OrderTerm'

export default defineComponent({

props: {

order: {

required: true,

type: String as PropType<OrderTerm>

}

in the template:

1	<p>Ordered by {{ order }} </p>

App.vue

</div>

</header>

Chinese Rule of Eight

Vue 3 with Typescript – 4 to 5

Types and Props

Implementing JobList

Using Vetur for template interpolation

Functions