Creating a personalized filter list in Vue Instant Search: A step-by-step guide

Currently, I'm utilizing Laravel Scout with Algolia as the driver. Vue is being used on the front end and I've experimented with the Vue instant search package, which has proven to be very effective.

The challenge I am encountering involves customizing it to fit the in-app styles that we have established.

Refinement Section

This specific component is what I am trying to modify. While attempting to override the classes as demonstrated in the Styling Section, I found that it doesn't meet my needs since I require additional tags and attributes within.

<ais-refinement-list attribute-name="categories.title" inline-template>
      <div class="column w-1/5">
            Hello
      </div>
</ais-refinement-list>

I am aware that I can begin by creating an inline template like this, but what I am still unsure of is how to obtain the values for refinements in order to create checkboxes and, ultimately, how to send them back to the component once they have been selected. Any assistance would be greatly appreciated.

javascriptlaravelvue.jslaravel-scoutvue-instant-search

Answer №1

After some thorough investigation, I delved into the package itself here and unearthed the template located within this link. Strangely enough, I couldn't find this in the vendor code.

I extracted all the variables and method calls from there.

Here is the customized version:

<ais-refinement-list attribute-name="categories.title" inline-template>
    <div class="column w-1/5">
        <h3>Categories</h3>
        <hr class="my-3">
        <div class='column w-full mb-4' v-for="facet in facetValues">
            <div class="checkbox-control mb-4">
                <input type="checkbox" :id="facet.name" :value="facet.name" v-model="facet.isRefined" @change="toggleRefinement(facet)"/>
                <label :for="facet.name">{{ facet.name }} ({{ facet.count }})</label>
            </div>
        </div>
    </div>
</ais-refinement-list>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript generated by PHP not functioning on IE version 7 and above

I've been experimenting with JavaScript generated from PHP, but I've run into issues specifically with Internet Explorer. While other browsers such as Firefox and Chrome have successfully processed and executed the JS code. As an example, you ca ...

phpjavascriptheadercontent-type

What is the process for associating JSON reponses with button actions on a webpage?

I developed a JavaScript script that interacts with a Tableau server API to handle running jobs. The script presents the retrieved jobs on a web page, along with corresponding buttons that enable users to terminate specific jobs. While the script function ...

javascriptjqueryjson

Allow users to interact with table rows by making them clickable and sending a post parameter to a jQuery

After creating a table and populating it with elements using JSTL tags and EL expressions, the next step is to make each row clickable. This can be achieved by implementing the following function: $("tr").click(function() { window.location.href = $(th ...

javajavascriptjqueryjstlel

Employing getters in the toObject() method

As I delve into the code of a Node.js Express application for learning purposes, I came across the following line that sparked my curiosity regarding the inclusion of getters and virtuals. var pgmsDbObj = chnnlList[chnnlIndex] var pgmsObj = pgmsDbObj.to ...

javascriptnode.jsexpressmongoose

The Antd Tooltip becomes unresponsive when a component is clicked and moved

Having an issue with a button that has an Antd tooltip, here is the setup: <Tooltip title="Some text"> <button onClick={openNotes}><Icon icon="notes" /></button> </Tooltip> Upon clicking the button, the ...

javascriptreactjsantd

Enable restricted access in Laravel 5 to restrict login based on user type

After setting up a users table with various user accounts and implementing an authentication system through middleware, I am curious if there is a way to restrict login access based on the user's type. For example, I have designated a user_type column ...

phplaravellaravel-5eloquentlaravel-5.3

Vuejs unstyled content flash

I encountered an issue while loading a page with Vue. Initially, I am able to access variables like @{{ value }} but once the page is fully loaded, the variable becomes invisible. How can I resolve this issue? I have already included Bootstrap and all scri ...

javascripthtmlvue.js

In Vue3, using the script setup feature allows for setting default property values within nested objects

I am developing a component that is designed to accept an object as a prop. In case the object is not provided, I aim to set a default value for it. <script setup lang="ts"> interface LocaleText { text: string; single?: boolean; coun ...

typescriptvue.jsvuejs3vue-composition-apivue-script-setup

Ways to host static content in ExpressJS for specific directories and exclude others

I need to configure my ExpressJS server to serve static files from specific paths only, excluding others. For example, I want to serve static files from all paths except /files where I only need to manipulate a file on the server. Currently, my code looks ...

javascriptnode.jsexpressserverpath

Is there a way to combine two addEventListeners into one for a single click event?

preview of a to-do list app I am faced with a situation where I have two addEventListeners, one to change the text color and another to change the circle color. In Condition 1: When I click on the circle, both the text and circle colors are changed. In ...

javascriptdomaddeventlistener

Issue with JS npm package: Unable to use import statement outside a module

I recently attempted to utilize the npm package found at https://github.com/nefe/number-precision. However, despite following the prescribed steps, I encountered some difficulties. After running npm install number-precision --save--dep, I tried impor ...

javascriptnpmwebpack

Encountering difficulty inserting ajax response into a specific div element

What could be the issue? I've included the getElementById and I am receiving a response, as confirmed by Firebug. The response is correct, but for some reason it's not populating my div area. <script> $(document).ready(function () { $( ...

javascriptjqueryajaxasp.net-mvc

Enhancing the structure and authentication of license plates

I'm having trouble figuring out how to apply Javascript to the text area. Can you advise on whether it's best to use onfocus, onblur, or onclick? Here is the code for the text area: <input type="text" name="c_Kenteken" id="invoerKenteken" cl ...

javascripthtmlcss

Getting Observable Centered Text in Angular with Chart.js

I have implemented ng2 charts and chart.js to create a doughnut chart. One of my requirements is to center text inside the doughnut chart, and I have tried the following approach: https://stackblitz.com/edit/ng2-charts-doughnut-centertext?file=src%2Fapp% ...

javascriptangularcharts

Delivering resources through the Nuxt configuration file

https://i.stack.imgur.com/2OWdE.png I came across a bootstrap template online that I want to customize for my Nuxt project. I have stored all the bootstrap files in the static folder. Within the nuxt.config.js file: module.exports = { /* ** Headers ...

javascriptvue.jsnuxt.js

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task. Unable to find a way to access ...

javascriptjqueryhtmlcsshtml-table

Setting multiple cookies with the setHeader method in NodeJs is a powerful capability that allows developers

Currently working on a project using node js, and I've encountered an issue with setting two different cookies. Every time I try to set them, the second cookie ends up overwriting the first one. Check out the code snippet below that I'm currently ...

javascriptnode.jsexpresscookies

Steps for accessing the files uploaded in a React application

Looking to implement an upload button using material UI that allows users to upload multiple files, with the goal of saving their paths into an array for future use. However, I'm unsure about where these uploaded files are stored. The code snippet be ...

javascriptreactjsmaterial-uiupload

Sound did not play when certain pictures made contact with other pictures

English is not my native language and I am a beginner in programming. I know my explanation may not be perfect, but I'm trying my best to communicate my ideas clearly. Please be patient with me and offer constructive feedback instead of downvoting, as ...

javascripthtmlfunctionaudiokonvajs

Guide to sending a post request in Node.js using Mongoose

I recently tried to follow a tutorial (https://medium.com/weekly-webtips/building-restful-apis-with-node-js-and-express-a9f648219f5b) from 2 years ago to build an API. However, I'm struggling to update the code to work with more recent changes in the ...

javascriptnode.jsmongodbexpressmongoose